【问题标题】:React Native Navigation, How do I navigate to another screen after pressing the button of an alert?React Native Navigation,按下警报按钮后如何导航到另一个屏幕?
【发布时间】:2022-11-29 09:50:32
【问题描述】:

我是 Javascript 和 React Native 的新手,我很困惑为什么以下代码无法将我导航到其他屏幕:

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName = "Home">
        <Stack.Screen name = "Home" component = {HomeScreen} />
        <Stack.Screen name = "Login" component = {LoginScreen} />
        <Stack.Screen name = "Register" component = {RegisterScreen}/>
        <Stack.Screen name = "Hub" component = {HubScreen}/>
        <Stack.Screen name = "NewList" component = {NewListScreen}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function RegisterScreen({navigation}) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  return (
    <View style={styles.container}>
      <Text style={styles.label}>Registration</Text>
      <TextInput 
        style={styles.input} 
        placeholder="Username"
        onChangeText={(text) => setUsername(text)}
      />
      <TextInput 
        style={styles.input} 
        placeholder="Password"
        onChangeText={(text) => setPassword(text)}
      />
      <Button
        title="Register"
        onPress = {() => Register(username, password)}
      />
    </View>
  )
}


function Register(username, password){
  const user = new User(username, password);
  //const navigation = useNavigation();
  user_array.push(user)
  console.log(user_array[0].username)
  Alert.alert("All Done!", "You have successfully registered.", {text: "OK", onPress: () => {navigation.navigate('Home')}})
}

我希望函数 Register 显示一个警报,用户可以在其中按 ok 并将他们重定向回主屏幕。警报出现,但按确定不会导航回主屏幕。从我读到的 React Native Navigation 文档功能 Register 不知何故需要访问导航参数,但我对如何实际操作感到困惑。

我尝试使用 useNavigation();但我一直收到挂钩调用错误。

【问题讨论】:

    标签: javascript reactjs


    【解决方案1】:

    尝试将 Register 函数放入 RegisterScreen

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2019-10-01
      • 1970-01-01
      • 1970-01-01
      • 2020-11-02
      • 1970-01-01
      • 1970-01-01
      • 2020-07-01
      相关资源
      最近更新 更多