React - 本机无法读取未定义的属性“导航”答案

【问题标题】：React - native cannot read property 'navigate" of undefinedReact - 本机无法读取未定义的属性“导航”
【发布时间】：2019-05-29 18:15:29
【问题描述】：

我正在用 react-native 构建一个应用程序，并且我正在使用 StackNavigator 进行导航。这是我的问题：

我有我的主要页面，我在其中导入了另外两个组件：


export default class RoomChoice extends Component {
  constructor(props) {
    super(props)
    this.state = {
      create: this.props.navigation.state.params.create,
      join: this.props.navigation.state.params.join
    }
  }

  onCreatePress = () => {
    this.setState({ create: true })
    this.setState({ join: false })
  }

  onJoinPress = () => {
    this.setState({ join: true })
    this.setState({ create: false })
  }

  render() {
    return (
      <View style={styles.container}>
        <BtnCreateJoinRoom
          create={this.state.create}
          join={this.state.join}
          onPressCreate={() => {
            this.onCreatePress()
          }}
          onPressJoin={() => {
            this.onJoinPress()
          }}
        />
        {this.state.create ? <CreateRoom /> : <JoinRoom />}
      </View>
    )
  }
}

这是我想在其中使用导航到另一个页面的 CreateRoom 组件：


export default class CreateRoom extends Component {

  render() {
    return (
      <View style={styles.container}>
          <BtnComponent title='Créer un code'
                        onPressBtn={() => { this.props.navigation.navigate('CodeCreateRoom') }}/>
      </View>
    )
  }
}

但是当我点击它时会抛出错误：无法读取未定义的属性“导航”


import {
  createStackNavigator,
  createAppContainer,
  createSwitchNavigator
} from 'react-navigation'

import Home from '../screens/Home'
import RoomChoice from '../screens/Room/RoomChoice'
import CreateRoom from '../screens/Room/CreateRoom'
import CodeCreateRoom from '../screens/Room/CodeCreateRoom'

const AppStack = createStackNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        header: null
      }
    },
    RoomChoice: {
      screen: RoomChoice,
      navigationOptions: {
        headerStyle: {
          backgroundColor: BUTTON_SECONDARY_BACKGROUND_COLOR,
          borderBottomWidth: 0
        },
        headerTintColor: 'white'
      }
    },
    CreateRoom: {
      screen: CreateRoom,
      navigationOptions: {
        headerStyle: {
          backgroundColor: BUTTON_SECONDARY_BACKGROUND_COLOR,
          borderBottomWidth: 0
        },
        headerTintColor: 'white'
      }
    },
    CodeCreateRoom: {
      screen: CodeCreateRoom,
      navigationOptions: {
        headerStyle: {
          backgroundColor: BUTTON_SECONDARY_BACKGROUND_COLOR,
          borderBottomWidth: 0
        },
        headerTintColor: 'white'
      }
    }
  },
  {
    headerLayoutPreset: 'center',
    initialRouteName: 'Home'
  }
)

我不明白为什么它不想导航，有人有什么想法吗？

【问题讨论】：

标签： react-native navigation

【解决方案1】：

您的导航器只有直接子级的导航属性。您的自定义 BtnCreateJoinRoom 组件不继承导航道具。您必须使用 withNavigation，或从其中一个直接子项传递道具。

https://reactnavigation.org/docs/en/connecting-navigation-prop.html

【讨论】：