Question

我正在尝试从嵌套pass state到stackNavigator使用tabNavigator。

首先，我的App.js navigation structure如下

App.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>
   );
  }
}

我的问题

如何在newState，initialScreen，{{}中访问传递状态tabNavigator（我从tabOne传递的状态） 1}}是嵌套的。

Answer 1

我看到了您的问题，我觉得您的代码有些混乱。您可以使用此行获取要传递给 StackNavigator 的参数。在您的标签页中尝试此代码 this.props.navigation.dangerouslyGetParent().getParam('state')

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

react-native：如何将状态传递给嵌套的stackNavigator到tabNavigator

1 个答案: