如何将登录凭据传递到React Native中导航抽屉的DrawerMenu的初始屏幕？

Question

我在我的应用程序中创建了React-navigation Drawer V3。我面临着在初始屏幕上获取登录凭据的问题，该屏幕是我的抽屉导航堆栈的“主页”屏幕。虽然我在以下的帮助下从Login.js传递DrawerMenu.js上的数据：

this.props.navigation.navigate('DrawerMenu', {
    loginData: loginData
})

并使用以下方法获取DrawerMenu.js上的数据：

constructor(props) {
    super(props)
    this.state = {
      loginData: props.navigation.state.params.loginData
    }
  }

但我需要将这些数据传输到Home.js，这是我无法获得的。将数据传递给DrawerMenu.js的原因是因为堆栈中有几个其他屏幕需要logindata并且他们能够使用抽屉内容组件中使用的screenProp来获取它，但是Home是初始屏幕所以没有办法它第一次接收数据，只有DrawerMenu.js文件最初接收它。有人可以帮我解决这个问题吗？

这是我的带有导航堆栈的DrawerMenu代码。

class DrawerMenu extends Component {

  constructor(props) {
    super(props)
    this.state = {
      loginData: props.navigation.state.params.loginData
    }
  }


  static navigationOptions =
    {
      header: null,
    };

  render() {
    return (
      <SafeAreaView style={styles.droidSafeArea}>
        <MyApp screenProps={{ loginData: this.state.loginData}} />
      </SafeAreaView>
    )
  }
}

class Hidden extends React.Component {
  render() {
    return null;
  }
}


const MainScreenNavigator = createStackNavigator({

  Home: { screen: Home },
  Screen1: {
    screen: Screen1
  },
  Screen2: {
    screen: Screen2
  },
  Screen3: {
    screen: Screen3
  }
},
  {
    initialRouteName: 'Home',
  });

const MyDrawerNavigator = createDrawerNavigator(
  {
    Main: {
      screen: MainScreenNavigator,
      navigationOptions: {
        drawerLabel: <Hidden />
      }
    }
  },
  {
    drawerWidth: 300,

    contentComponent: DrawerComponent
});

const MyApp = createAppContainer(MyDrawerNavigator);

export default DrawerMenu;

我在用 ：

"react-native" : "0.57.5",
 "react": "16.6.1",
 "react-navigation": "^3.5.1"

Answer 1

您可以使用AsyncStorage保存数据进行存储

_storeData = async () => {
  try {
    await AsyncStorage.setItem('Key Value', 'Item Value');
  } catch (error) {
    // Error saving data
  }
};

要检索

_retrieveData = async () => {
  try {
    const value = await AsyncStorage.getItem('Key Value');
    if (value !== null) {
      // We have data!!
      console.log(value);
    }
  } catch (error) {
    // Error retrieving data
  }
};

或者你可以使用redux。