如何访问元素道具反应导航

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