将参数传递给路由 React native

Question

我正在尝试将参数传递到新屏幕以显示它。我的对象在我使用地图显示的数组的获取数据中，代码如下所示：

 <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>

我会很感激一些help.thank你

Answer 1

在您的第一个屏幕中，您必须像这样传递文本...

<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

将参数传递给路由 React native

Passing param to route React native

react-native

ecmascript-6

stack-navigator