react-native - React Native Buttons onPress 没有任何反应，onChangeText 也不起作用

Question

我是 React Native 的新手。我有一个包含两个字段的登录表单。我想在将用户发送到 Dashboard.js 之前对用户进行身份验证。无论我尝试什么，按钮都没有做任何事情（绝对没有任何反应，没有错误）。我将代码保留在 Login.js 中，以显示我尝试做的所有事情，即

1. 路由到dashboard.js
2. 试图通过在按钮按下时调用 handleSubmitPress 函数来做一些事情。
3. 弹出警报。

我用了两个按钮。一份来自 react-native-paper，一份来自 react-native。我在下面给出了我的 app.js 和 login.js 的代码。请问有人可以帮忙吗？

代码

  App.js
    import React from "react";
    import { NavigationContainer } from "@react-navigation/native";
    import { createStackNavigator } from "@react-navigation/stack";
    import DashBoard from "./mainmenu/DashBoard";
    import Login from "./mainmenu/Login";
    
    const Stack = createStackNavigator();
    
    export default function App() {
      return (
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen name="Login" component={Login} />
            <Stack.Screen name="DashBoard" component={DashBoard} />
          </Stack.Navigator>
        </NavigationContainer>
      );
    }
    
    
    Login.js
    import React, { useState } from "react";
    import { Title, TextInput} from "react-native-paper";
    import { View, Alert,Button } from "react-native";
    export default function Login() {
      const [mobile, setMobile] = useState("123456789");
      const [password, setPassword] = useState("123");
    
      function handleSubmitPress() {
        console.log({ mobile, password });
      }
    
      return (
        <View
          style={{
            backgroundColor: "skyblue",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <TextInput
            label="Your mobile number "
            value={mobile}
            onChangeText={(text) => setMobile(text)}
          />
          <TextInput
            label="Type Password  "
            value={password}
            onChangeText={(text) => setPassword(text)}
          />
    
          <Button
            icon="camera"
            type="submit"
            mode="contained"
            //onPress={() => props.navigation.navigate("DashBoard")}
            onPress={()=>Alert.alert('Navigate pressed')}
          >
            Navigate
          </Button>
    
          <Button
              title="Print"
              onPress={() => Alert.alert('Simple Button pressed')}
              // onPress={handleSubmitPress()}
            />
        </View>
      );
    }

Answer 1

将您的登录组件更改为此。

...
const Login = ({navigation}) => {
  const [mobile, setMobile] = useState('123456789');
  const [password, setPassword] = useState('123');

  function handleSubmitPress() {
    console.log({mobile, password});
  }

  return (
    <View
      style={{
        backgroundColor: 'skyblue',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <TextInput
        label="Your mobile number "
        value={mobile}
        onChangeText={text => setMobile(text)}
      />
      <TextInput
        label="Type Password  "
        value={password}
        onChangeText={text => setPassword(text)}
      />

      <Button
        title="title"
        icon="camera"
        type="submit"
        mode="contained"
        onPress={() => navigation.navigate('DashBoard')}>
        Navigate
      </Button>

      <Button title="Print" onPress={() => handleSubmitPress()} />
    </View>
  );
};

export default App;

有几个问题。

我使用了默认的 React Native 按钮。所以我在其中一个按钮上添加了一个标题道具，因为这是必需的。我给它的值是“title”，但是把它改成你想要的或者使用 React Native Paper 按钮。

主要问题是你如何调用handleSubmitPress你的按钮onPress。

你onChangeText很好，你只是看不到结果，因为handleSubmitPress没有被调用。

我还使用了解构，因此您可以直接访问导航道具。你也可以做const Long = (props) => {...}和使用props.navigation，但无论哪种方式，你都需要传递一些东西，否则导航将不起作用。