React - native не может прочитать свойство 'navigate' из неопределенного - PullRequest
Новая
       10

React - native не может прочитать свойство 'navigate' из неопределенного

0 голосов
/ 29 мая 2019

Я создаю приложение на реагирующем языке и использую 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' из undefined 


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

Я не понимаю, почему он не хочет ориентироваться, у кого-нибудь есть идеи?

1 Ответ

0 голосов
/ 29 мая 2019

У вас есть навигационная опора только на прямых дочерних элементах вашего навигатора. Ваши пользовательские компоненты BtnCreateJoinRoom не наследуют навигационную опору. Вы должны использовать с Навигацией, или передать опору от одного из непосредственных детей.

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

...