react-native：如何將狀態傳遞給嵌套的 stackNavigator 到 tabNavigator

Question

我正在嘗試使用從嵌套stackNavigator到tabNavigator pass state 。

首先我的App.js navigation structure看起來像這樣

應用程序.js

//tabNavigator. This is where I want to pass my state. 
const tabNavigator = createMaterialTopTabNavigator({
    tabOne:tabOne,
    tabTwo: tabTwo,
    tabThree:tabThree
  })

//I nested tabNavigator to this StackNavigator
 const StackNavigator = createStackNavigator({
  stackAndTab: {
    screen: tabNavigator,
    navigationOptions: ({ navigation }) => ({
      header:
      <CustomHeader
        navigation={navigation}
        />
      ,
    })
  },
}, {
  defaultNavigationOptions: {
    header: null
  }
})

//I have another stackNavigator where I put all my stackNavigators.
const AllStackNavigator = createStackNavigator(
  {
    InitialScreen:InitialScreen,
    StackNavigator:StackNavigator,
  },
  {
    defaultNavigationOptions: {
      header: null,
    },
  },
);

//Finally I nest my StackNavigator to SwitchNavigator
const SwitchNavigator = createSwitchNavigator(
  {
  AllStackNavigator:AllStackNavigator
  },
  {
    defaultNavigationOptions: {
      header:  null,
    },
  },
);

const CombinedNavigator = createAppContainer(StartSwitchNavigator);

export default class App extends React.Component {

  render() {
    return <CombinedNavigator/>;
  }
}

我試圖pass state到StackNavigator從InitialScreen是這樣的：

export default class InitialScreen extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      newState:'this is new State'
   }
  }

  render() {

return (
  <View style={styles.container}>
   <TouchableOpacity
  onPress={()=> this.props.navigation.navigate('StackNavigator', {state:'this.state.newState})}
  style={{width:'100%', height:110}}>
  <Text>pass state</Text>
  </TouchableOpacity>
  </View>
   );
  }
}

我的問題

如何在tabOne 、 tabTwo 、 tabThree嵌套的tabNavigator中訪問傳遞的狀態newState （我從initialScreen傳遞的狀態）。

Answer 1

我看到了你的問題，我覺得你的代碼有點混亂。 您可以使用此行獲取傳遞給StackNavigator 的參數。 在您的選項卡屏幕中嘗試此代碼this.props.navigation.dangerouslyGetParent().getParam('state')

並請更正您的onPress事件onPress={()=> this.props.navigation.navigate('StackNavigator', {state:this.state.newState})}