StackNavigator через компонент дает неопределенную ошибку

Я пытался использовать StackNavigator для навигации, и он работает, когда я использую его для перехода с одного экрана на другой, как объяснено здесь. Но когда я пытаюсь использовать подкомпонент для навигации по себе, навигация, похоже, не работает, и я не смог найти для нее никакого решения.

Как показано в приведенном ниже коде, я пытаюсь использовать тестовый компонент, в котором есть кнопка, по которой можно щелкнуть, чтобы перейти с HomeScreen на ChatScreen.

Я почти уверен, что решение является чем-то базовым, но я действительно нигде не могу его найти.

Вот мой код:

import React from 'react';
import {
  AppRegistry,
  Text,
  View,
  Button
} from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    let userName = 'Ketan';
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat', { user: userName })}
          title={"Chat with " + userName}
        />
        <Test />
      </View>
    );
  }
}

class ChatScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${navigation.state.params.user}`,
  });
  render() {
    const { params } = this.props.navigation.state;
    return (
      <View>
        <Text>Chat with {params.user}</Text>
      </View>
    );
  }
}

class Test extends React.Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Button
          onPress={() => navigate('Chat', { user: 'TestBot' })}
          title={'This is a test'}
        />
      </View>
    )
  }
}

const NavApp = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen },
});

AppRegistry.registerComponent('NavApp', () => NavApp);

Вот ошибка, которую я получаю:

введите здесь описание изображения

Вот демо для тестирования: https://snack.expo.io/HyaT8qYob

Я надеюсь, что мой вопрос достаточно ясен для того, что я имею в виду.


react-native stack-navigator react-navigation
person Ketan Malhotra    schedule 27.09.2017    source источник
comment
Вам нужно передать его <Test />. Проверьте этот ответ stackoverflow.com/questions/46269595/   -  person Wainage    schedule 28.09.2017
comment
Эта ссылка может вам очень помочь «undefined не является объектом, эта навигация по реквизиту реагирует на родную»> stackoverflow.com/questions/52327643/   -  person Mahdi Bashirpour    schedule 14.09.2018

Ответы (1)


arrow_upward
3
arrow_downward

Поскольку ваш компонент Test не принадлежит стеку навигации, у него нет поддержки навигации. Вы можете сделать пару вещей.

Самый простой — передать навигацию дочернему компоненту, как в примере ниже.

return (
  <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat', { user: userName })}
          title={"Chat with " + userName}
        />
        <Test navigation={this.props.navigation} />
      </View>
);

Второй вариант: вы можете использовать withNavigation из реагирующей навигации. Подробнее об этом можно узнать здесь

import { Button } 'react-native';
import { withNavigation } from 'react-navigation';

const MyComponent = ({ to, navigation }) => (
    <Button title={`navigate to ${to}`} onPress={() => navigation.navigate(to)} />
);

const MyComponentWithNavigation = withNavigation(MyComponent)

с навигацией

withNavigation — это компонент более высокого порядка, который передает свойство navigation в обернутый компонент. Это полезно, когда вы не можете напрямую передать свойство navigation в компонент или не хотите передавать его в случае глубоко вложенного дочернего элемента.

person bennygenel    schedule 27.09.2017