如何在React Native的其他函数中使用useState

Question

我有一个关于 React Native 的问题。我想在这里的文本输入中写一个用户名

function logIn({ navigation }) {
  
  const [username, setUsername] = useState('');

  return (
    <View  style={{ backgroundColor: "white"}} >
      <View>
        <TextInput style={styles.input}  placeholder='username' placeholderTextColor='white' textAlign='center' onChangeText={(val) => setUsername(val)} />
      </View>
      <View>
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      </View>
    </View>
  );
}

然后我想看看我在这个屏幕上写的用户名。当然这不起作用，因为它显示无法找到变量用户名，所以有没有办法解决这个问题？

function HomeScreen({ navigation }) {
  return(
    <View style={{ flex:1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Welcome {username}</Text>
    </View>
  );
}

Answer 1

您需要以一种需要它的组件可以访问的方式构建您的状态。 React 喜欢你在树中 'higher' 的组件中拥有状态，而不是需要它的组件，你可以查看 https://reactjs.org/docs/lifting-state-up.html。

否则你可以使用 Context API 或像 Redux 这样的 'global' 商店。

登录的用户数据是 Context 或 Redux 之类的很好的候选者，这样您就可以在 Context / Redux 提供程序中的应用程序的任何部分访问 username 之类的内容提供登录数据（或您可能拥有的任何其他全局数据）

Answer 2

您可以这样使用 navigation.navigate 函数将参数传递给 Home 屏幕：

function logIn({ navigation }) {
  
  const [username, setUsername] = useState('');

  return (
    <View  style={{ backgroundColor: "white"}} >
      <View>
        <TextInput style={styles.input}  placeholder='username' placeholderTextColor='white' textAlign='center' onChangeText={(val) => setUsername(val)} />
      </View>
      <View>
      <Button title="Go to Home" onPress={() => navigation.navigate('Home', {username: username})} />
      </View>
    </View>
  );
}

然后在HomeScreen:

function HomeScreen({ navigation, route }) {
  return(
    <View style={{ flex:1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Welcome {route.params.username}</Text>
    </View>
  );
}

如何在React Native的其他函数中使用useState

How to use useState in other functions React Native

javascript

reactjs

react-native

use-state