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

Question

我在我的应用程序中创建了React-navigation Drawer V3。我面临着在初始屏幕上获取登录凭据的问题，该屏幕是我的抽屉导航堆栈的"主"屏幕。虽然我正在从登录.js在抽屉菜单上传递数据.js但借助于：

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

并在抽屉菜单上获取数据.js ：

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

但是我需要将这些数据发送到主页.js但我无法获得。将数据获取到 DrawerMenu 的原因.js是因为堆栈中还有其他几个屏幕需要登录数据，并且他们能够使用抽屉内容组件中使用的 screenProps 获取它，但由于 Home 是初始屏幕，因此它无法在第一次接收数据， 最初只有抽屉菜单.js文件接收它。有人可以帮助我解决这个问题吗？

这是我的带有导航堆栈的抽屉菜单代码。

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 .