Как использовать реагирующую навигацию в const? - PullRequest
Новая
       39

Как использовать реагирующую навигацию в const?

0 голосов
/ 08 февраля 2019

Я использую const, чтобы показать компоненты.Теперь, когда я использую навигацию реагирования для кнопки в const, я вижу эту ошибку: undefined не является объектом (оценивается как '_this.props.navigation.navigate')

Я попытался добавить навигацию = {this.props.navigation} к кнопке для разрешения присвоения, но не работает. 

const WomenTab = () => (
    <View>
      <Button onPress={() => {
                        this.props.navigation.dispatch(StackActions.reset({
                          index: 0,
                          actions: [
                            NavigationActions.navigate({ routeName: 'Wallet' })
                          ],
                        }))
                      }}>
          <Text>Click</Text>
      </Button>
    <View>
);

Ссылка на библиотеку: http://github.com/react-native-community/react-native-tab-view

Ответы [ 3 ]

0 голосов
/ 08 февраля 2019

Это называется функциональный компонент , часто называемый компонентом без состояния.

Одно из основных отличий состоит в том, что SFC не получают автоматически реквизиты, а скорее должны бытьпередано в качестве аргументов.Поэтому вместо того, чтобы говорить this.props, вы должны использовать этот шаблон: 

const WomenTab = (props) => ( // <-- add props as an argument
  <View>
    <Button onPress={() => {
      props.navigation.dispatch(StackActions.reset({
        index: 0,
        actions: [ NavigationActions.navigate({ routeName: 'Wallet' }) ],
      }))
    }}>
      <Text>Click</Text>
    </Button>
  <View>
);

Так как реквизит навигации автоматически передается дочерним элементам навигаторов, вам больше ничего не нужно делать.Если вы хотите передать другие реквизиты, вы должны сделать это как обычно: 

<WomenTab myProp={value} />

Другой распространенный шаблон - деструктурировать реквизиты, переданные в SFC, следующим образом: 

const WomenTab = ( {navigation} ) => ( // <-- you can pick the props you want via destructuring
  <View>
    <Button onPress={() => {
      navigation.dispatch(StackActions.reset({
        index: 0,
        actions: [ NavigationActions.navigate({ routeName: 'Wallet' }) ],
      }))
    }}>
      <Text>Click</Text>
    </Button>
  <View>
);

Надеюсь, это поможет, удачи!

0 голосов
/ 08 февраля 2019

В основном ваши реквизиты не передаются от родительского компонента к дочернему компоненту.Убедитесь, что вы определили свой компонент WomenTab в функции createStackNavigator.Также передавайте реквизиты в компонент функции. 

const WomenTab = (props) => (
<View>
  <Button onPress={() => {
                    this.props.navigation.dispatch(StackActions.reset({
                      index: 0,
                      actions: [
                        NavigationActions.navigate({ routeName: 'Wallet' })
                      ],
                    }))
                  }}>
      <Text>Click</Text>
  </Button>
<View>

);

0 голосов
/ 08 февраля 2019

Вам нужно передать props на const, что-то вроде этого 

const WomenTab = (props) => (
    <View>
      <Button onPress={() => {
                        props.navigation.dispatch(StackActions.reset({
                          index: 0,
                          actions: [
                            NavigationActions.navigate({ routeName: 'Wallet' })
                          ],
                        }))
                      }}>
          <Text>Click</Text>
      </Button>
    <View>
);

Затем, когда вы используете const, вы пропустите нужные реквизиты.

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