Как получить доступ к элементам реквизита реагировать на навигацию

Question

Я объявил элемент верхнего бара, подобный этому.

export default Class MyClass extends React.Component {
  static router = TopTabNavigator.router;

  render() {
    return() {
      <View>
        <TopTabNabiagtor
          navigation = {this.props.navigation}
          data = {this.state.data}
        />
      </View>
    }
  }
}

и до сих пор не знаю, как получить доступ к реквизитам данных с момента создания TopBar.

const TopTabNavigator = createMaterialTopTabNavigator(
    {
        Tab1: {
            screen: props => <Tab1 {...props} information = {props.data.information} />,
            navigationOptions: {
                tabBarLabel: "Tab1"
            }
        },
    },

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

Answer 1

Вам нужно передать их особым образом, то есть с помощью screenProps, если вы этого не сделаете, они могут не попасть туда.

Документация объясняет, как пройти screenProps https://reactnavigation.org/docs/en/stack-navigator.html#navigator-props

Изменения кода

В MyClass передайте реквизиты, которые вы хотите передать, следующим образом

<TopTabNabiagtor
  navigation = {this.props.navigation}
  screenProps = {{data: this.state.data}}
/>

Вам не нужно делать ничего особенного, когда вы создаете TopTabNavigator, вы просто должны иметь возможность получить к ним доступ непосредственно в Tabs, выполнив следующее

this.props.screenProps.data.information

Пример кода и закуски

Вот пример кода, который я также сделал для вас удобной закуской. https://snack.expo.io/@andypandy/passing-props-through-a-navigator

App.js

import AppContainer from './MainNavigation';
export default class App extends React.Component {

    state = {
      data: { key: 2345, name: 'John'}
    };

  render() {
    return (
      <View style={{flex: 1}}>
        <AppContainer screenProps={{data: this.state.data}}/>
      </View>
    )
  }
}

MainNavigation.js

import { createMaterialTopTabNavigator, createAppContainer } from 'react-navigation';

const screens = {
  Screen1: {
    screen: props => <Screen1 {...props} /> // you can set up the screen this way
  },
  Screen2: {
    screen: Screen2 // or you can set it up this way, I usually set it up this way
  }
}

const config = {
  headerMode: 'none',
  initialRouteName: 'Screen1'
}

const MainNavigator = createMaterialTopTabNavigator(screens,config);
export default createAppContainer(MainNavigator);

Screen1.js

export default class Screen1 extends Component {

  render() {
    return (
      <View style={styles.container}>
        <Text>Screen 1</Text>
        <Text>{this.props.screenProps.data.name}</Text>
      </View>
    )
  }
}