react-native - 传递参数来路由 React Native
问题描述
我正在尝试将参数传递到新屏幕以显示它。我的对象在我使用地图显示的数组的获取数据中,代码如下所示:
<Text > Show:</Text>
{
this.state.data.map((item, i) => {
//Show only two dates
return (i < 2) ?
<View>
<Text>{moment(item[0]).format("ddd DD/MM")}</Text>
<View style={{ flex: 1, flexDirection: 'row' }}>
{
item[1].map((day, i) => {
//show only 3 times
return (i < 3) ?
<TouchableOpacity onPress={() => NavigationService.navigate('myScreen',//what should i wright here!>
<Text>{moment(day.date_start).format("h:mm a")}</Text> // i want to pass this displayed text {moment(day.date_start).format("h:mm a")}
</TouchableOpacity>
:
<></>
})
}
</View>
</View>
: <></>
})
}
如您所见,我想将 {moment(day.date_start).format("h:mm a")} 传递给 myScreen 并显示它,但我不知道如何。myScreen 代码很简单:
class Myscreen extends React.Component {
render() {
return (
<Text> display it here! </Text>
我会很感激一些帮助。谢谢
解决方案
在您的第一个屏幕中,您必须像这样传递文本...
<TouchableOpacity onPress={() => this.props.navigation.navigate('myScreen', { text: moment(day.date_start).format("h:mm a") })}>
<Text>Press me</Text>
</TouchableOpacity>
在您的 myScreen 中,您必须像这样接收它...
class Myscreen extends React.Component {
constructor(props) {
super(props);
}
render() {
const text = this.props.route.params.text;
return (
<Text>{text}</Text>
)
}
}
请确保您正在使用@react-navigation/stack": "^5.x.x
推荐阅读
- html - 列左对齐问题 - 仅限移动设备
- typescript - 在 typescript 3.4.1 中更改了 Immutable.Record 类型行为。向上转型不再有效
- javascript - 以这种方式在 `with` 语句中使用 `eval` 是否安全?
- java - 如何在实体模式下绘制网格的表面?
- fortran - 有没有可能在 Fortran 控制台中隐藏光标间运行时间?
- json - 如何导入在外部 json 文件中定义的地图?
- python - Python - 缺少 rest_framework 模块
- python - 如何使数据框全局化并在函数中使用它?
- flutter - 如何将子项动态添加到 Scaffold 小部件
- javascript - 在 NestJS 中测试解析器