如何在const中使用React导航?

时间:2019-02-08 15:13:30

标签: reactjs react-native react-navigation react-native-navigation

我使用const来显示组件。现在,当我对const中的按钮使用反应导航时,我看到此错误:undefined不是对象(正在评估'_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

3 个答案:

答案 0 :(得分:4)

称为functional component,通常称为无状态功能组件。

主要区别之一是SFC不会自动接收道具,而必须作为参数传递。因此,您无需使用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>
);

希望有帮助,祝您好运!

答案 1 :(得分:1)

您需要将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} />

答案 2 :(得分:1)

基本上,您的道具不会从父组件传递到子组件。确保已在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>

);