如何在常量中使用react导航？

Question

我使用const来显示组件。现在，当我对const中的按钮使用react导航时，我看到这个错误:未定义的不是一个对象(计算'_this.props.navigation.navigate')

我尝试将navigation={this.props.navigation}添加到按钮以允许禁烟，但不起作用。

const WomenTab = () => (
    <View>
      <Button onPress={() => {
                        this.props.navigation.dispatch(StackActions.reset({
                          index: 0,
                          actions: [
                            NavigationActions.navigate({ routeName: 'Wallet' })
                          ],
                        }))
                      }}>
          <Text>Click</Text>
      </Button>
    <View>
);

库链接：http://github.com/react-native-community/react-native-tab-view

Answer 1

这被称为functional component，通常被称为无状态功能组件。

其中一个主要区别是，SFC不会自动接收prop，而是必须作为参数传递。因此，您应该使用以下模式，而不是this.props：

const WomenTab = (props) => ( // <-- add props as an argument
  <View>
    <Button onPress={() => {
      props.navigation.dispatch(StackActions.reset({
        index: 0,
        actions: [ NavigationActions.navigate({ routeName: 'Wallet' }) ],
      }))
    }}>
      <Text>Click</Text>
    </Button>
  <View>
);

因为导航属性会自动传递给导航器的子节点，所以你不需要做任何其他的事情。如果你想通过其他道具，你可以照常做：

<WomenTab myProp={value} />

另一个常见的模式是destructure传递给SFC的属性，如下所示：

const WomenTab = ( {navigation} ) => ( // <-- you can pick the props you want via destructuring
  <View>
    <Button onPress={() => {
      navigation.dispatch(StackActions.reset({
        index: 0,
        actions: [ NavigationActions.navigate({ routeName: 'Wallet' }) ],
      }))
    }}>
      <Text>Click</Text>
    </Button>
  <View>
);

希望这能有所帮助，祝你好运！

Answer 2

您需要将您的props传递给const，如下所示

const WomenTab = (props) => (
    <View>
      <Button onPress={() => {
                        props.navigation.dispatch(StackActions.reset({
                          index: 0,
                          actions: [
                            NavigationActions.navigate({ routeName: 'Wallet' })
                          ],
                        }))
                      }}>
          <Text>Click</Text>
      </Button>
    <View>
);

然后当你使用你的const时，你需要传递你想要的道具。

<WomenTab navigation={this.props.navigation} />

Answer 3

基本上，您的道具不会从父组件传递到子组件。确保您已经在createStackNavigator函数中定义了WomenTab组件。还要在你的函数组件中传递道具。

const WomenTab = (props) => (
<View>
  <Button onPress={() => {
                    this.props.navigation.dispatch(StackActions.reset({
                      index: 0,
                      actions: [
                        NavigationActions.navigate({ routeName: 'Wallet' })
                      ],
                    }))
                  }}>
      <Text>Click</Text>
  </Button>
<View>

)；