javascript - 在 react-native 中单击登录时如何设置状态？

Question

我想在登录后创建抽屉。我不确定我要做什么是对的。如果它是正确的，我该如何回到 App.js 文件中处理 setIsLogin ？

Myapp.js

import LoginScreen from './src/screens/LoginScreen';

export default function App() {

  const [isLogin, setIsLogin] = useState(false);

  if(isLogin){
    return(
      //create Drawer here
    )

  }else{
    return(
      <LoginScreen/>
    )
  }
}

登录屏幕.js

const LoginScreen = ({navigation}) => {

    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");

    
    const _onPress = async() => {

        const payload = {
            username:username,
            password:password
        }

    };

    return (
        <View>
            <TouchableOpacity onPress={() => _onPress()} >
                <Text style={styles.textButton}>Log in</Text>
            </TouchableOpacity>
        </View>
    )
}

export default LoginScreen;

如果我误解了或者有没有更好的方法，请告诉我，非常感谢。

标签： javascriptreact-nativereduxhook

Answer 1

给你，这应该工作：

您可以将 setState 作为父级的引用传递给子级，更新子级的状态，它将重新渲染父级。

import LoginScreen from './src/screens/LoginScreen';

export default function App() {

  const [isLogin, setIsLogin] = useState(false);

  if(isLogin){
    return(
      //create Drawer here
    )

  }else{
    return(
      <LoginScreen setLoginStatus = {setIsLogin}/>
    )
  }
}


const LoginScreen = ({navigation, setLoginStatus}) => {

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  
  const _onPress = async() => 
  {

      const payload = {
          username:username,
          password:password
      }

      setLoginStatus(true) //Or false depending on the payload response.

  };

  return (
      <View>
          <TouchableOpacity onPress={() => _onPress()} >
              <Text style={styles.textButton}>Log in</Text>
          </TouchableOpacity>
      </View>
  )
}

export default LoginScreen;