0

我在我的应用程序中创建了 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 的原因是因为堆栈中还有其他几个屏幕需要登录数据，并且他们能够使用抽屉内容组件中使用的 screenProps 来获取它，但由于 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"
4

1 回答 1

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.

于 2019-04-09T07:09:25.303 回答