Question

我有一个组件，当单击它来更改屏幕时会使用导航。当我这样做时，我希望能够使用navigation.navigate传递几个参数。

卡组件

const Card = props => {
    return (
    <TouchableOpacity activeOpacity={0.7} onPress={() => props.nav.navigate('ActivityScreen', {activityTitle: 'this is not working >:(', activityID: props.id})}>
        <View style={styles.card}>
            <Text style={styles.title}>{props.title}</Text>
            <View style={styles.insideCardView}>
                <Text>More Text</Text>
            </View>
        </View>
    </TouchableOpacity>
    );
}

新屏幕（我想获取我的信息）

import React from 'react';
import  {View, Text, StyleSheet} from 'react-native';

const ActivityScreen = props => {
    return (<View style={styles.header}>
        <Text>This is the Avtivity page</Text>
        {
            //This does not work, gives no error, just blank
        }
        <Text>{props.activityTitle}</Text>
        <Text>{props.activityID}</Text>
    
    </View>);
}

这应该起作用吗？如果是这样，这是最有效的方法吗？

谢谢。

Answer 1

您必须使用props.route.params.yourParamName访问它。因此，编写如下代码：

import React from 'react';
import  {View, Text, StyleSheet} from 'react-native';

const ActivityScreen = props => {
  return (
    <View style={styles.header}>
      <Text>This is the Avtivity page</Text>
      {
          //This does not work, gives no error, just blank
      }
      <Text>{props.route.params.activityTitle}</Text>
      <Text>{props.route.params..activityID}</Text>
    </View>
  );
}

有没有一种方法可以在React Native中使用导航来传递几个参数？

1 个答案: