在React-Native中单击登录时如何设置状态？

Applesz 发表于 Dev

Applesz

登录后我想创建抽屉。我不确定我要做什么是对的。如果正确，我该如何回到处理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/>
    )
  }
}

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;

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

App City

在这里，这应该可行：

您可以将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;