React Native Navigation const { navigation } = this.props.navigation;

Я изучаю react-native навигацию https://reactnavigation.org/docs/intro/. Я вижу в примерах там

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

Я не мог понять, что именно эта строка кода для const { navigate } = this.props.navigation;


react-native react-navigation
person N Sharma    schedule 28.03.2017    source источник
comment
Это называется деструктурирующим назначением. Это то же самое, что и const navigate = this.props.navigation.navigate.   -  person Andrew Li    schedule 28.03.2017
comment
@AndrewLi большое спасибо!   -  person N Sharma    schedule 28.03.2017

Ответы (2)


arrow_upward
14
arrow_downward

синтаксис не имеет ничего общего с React Native, он называется присваивание деструктурирования в es6/es2015

const { navigate } = this.props.navigation;

эквивалентен, за исключением var и const .

var navigate = this.props.navigation.navigate

пример без деструктуризации должен выглядеть так

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => this.props.navigation.navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}
person Ahmed Eid    schedule 28.03.2017
comment
где и как он используется в моей программе? как это работает ? - person N Sharma; 28.03.2017
comment
это в основном извлечение метода navigate непосредственно из this.props.navigate и назначение его переменной navigate . - person Ahmed Eid; 28.03.2017
comment
так что здесь onPress={() => navigate('Chat')} это ссылка на const { navigate } = this.props.navigation; - person N Sharma; 28.03.2017
comment
да : а именно onPress={ () => this.props.navigation.navigate('Chat') } то же самое . - person Ahmed Eid; 28.03.2017
comment
this.props.navigation что я понял из этого, так это то, что navigation это реквизит. У меня вопрос, это свойство какого компонента? - person N Sharma; 28.03.2017
comment
он был передан HomeScreen из родительского компонента, родительский компонент может отображать HomeScreen следующим образом: <HomeScreen navigation={/* obj to pass *?} /> - person Ahmed Eid; 28.03.2017
comment
const SimpleApp = StackNavigator({ Home: { screen: HomeScreen }, }); AppRegistry.registerComponent('SimpleApp', () => SimpleApp); он отображает HomeScreen, но здесь ничего не передается. - person N Sharma; 28.03.2017
comment
docs: ПРИМЕЧАНИЕ. Свойство navigation передается каждому компоненту, поддерживающему навигацию, включая навигаторы. Большим исключением является то, что реквизит navigation навигатора может не иметь вспомогательных функций (navigate, goBack и т. д.); он может иметь только state и dispatch. Чтобы navigate использовать navigation реквизит навигатора, вам придется dispatch использовать создатель действий. - person Ahmed Eid; 28.03.2017

arrow_upward
1
arrow_downward

Включите в свой ServiceAction this.props.navigation что-то вроде этого:

<HomeScreen navigation={this.props.navigation}/>

потому что props.navigation по умолчанию находится в вашем родительском компоненте

и на компоненте HomeScreen вы получите доступ к навигации, например:

..
goToSignUp() {
   this.props.navigation.navigate('SignUp');
}
..

Для меня и раньше было непонятно. Ваше здоровье!

person Manuel Alanis    schedule 03.04.2019