时间戳

首页 > 解决方案 > 将异步存储与 React Navigation 结合使用（React Native）

react-native - 将异步存储与 React Navigation 结合使用（React Native）

问题描述

希望在移动应用程序中使用异步存储，但在将状态提升到“根”文件后，很难弄清楚如何通过导航将状态作为道具传递。

这是我发现的一个独立于导航的示例：

const [ "state", "setState" ] = useState(state);

... 

return (

   <Container>
     <Home state={state} setState={setState}/>
   </Container>

)

这是我用导航尝试过的：

 const [ "state", "setState" ] = useState(state);


  <NavigationContainer>
    <Stack.Navigator>
       <Stack.Screen name ='Home' >
         {props => <Home state={state} setState={setState}/>}
       </Stack.Screen>
    </Stack.Navigator>
  </NavigationContainer>

如果需要提供更多的上下文，会做 - 只是让我知道。提前致谢

标签： react-nativestatereact-navigationreact-propsasyncstorage

解决方案

您可以在此处尝试的工作示例https://snack.expo.io/@vasylnahuliak/great-bubblegum

import 'react-native-gesture-handler';
import React, { useState } from 'react';
import { Text, View, StyleSheet, Button, FlatList } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const HomeSceen = ({ route, navigation, counter, setCounter }) => {
  return (
    <View>
      <Text>Counter: {counter}</Text>
      <Button title="Increase" onPress={() => setCounter(prevCounter => prevCounter + 1)} color="green" />
      <Button title="Decrease" onPress={() => setCounter(prevCounter => prevCounter - 1)} color="tomato" />
    </View>
  );
};

const Stack = createStackNavigator();

const App = () => {
  const [counter, setCounter] = useState(0);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="HomeSceen"
          component={(props) => (
            <HomeSceen counter={counter} setCounter={setCounter} {...props} />
          )}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

推荐阅读