如何訪問元素道具反應導航

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 ，它們可能無法到達那里。

該文檔說明了如何通過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>
    )
  }
}