Question

我正在用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>
    )
  }
}

但是当我单击它会引发错误：无法读取未定义的属性“ navigate”


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'
  }
)

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

Answer 1

您只能在导航器的直接子级上使用导航道具。您的自定义BtnCreateJoinRoom组件不会继承导航道具。您必须使用withNavigation，或从直接子级之一传递prop。

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

React-本机无法读取未定义的属性“ navigate”

1 个答案: