Javascript 在React Native中隐藏和显示组件

我不知道如何隐藏和显示依赖于状态的组件。我想出了下面的代码，但我认为它是错误的，因为在我按下“登录”按钮后，UI没有被更新。有没有一个通用的方法来做到这一点？我还告诉自己如何处理“对话”之间的转换。例如，我希望当单击按钮时，当前对话框关闭，目标对话框渲染。我怎么能这样做

import React from 'react';
import { ImageBackground, StyleSheet, TouchableOpacity, Text, View, TextInput} from 'react-native';

function WelcomeScreen(props) {
   var loginDialog = {
      visible: false
};

var signUpDialog = {
    visible: false
};

var welcomeDialog = {
    visible: true
};

const login = loginDialog.visible ? (
    <View style={styles.loginDialog}>
        <TextInput style={styles.input}/>
    </View>
) : null;

const signup = signUpDialog.visible ? (
    <View style={styles.signUpDialog}>
        <TextInput style={styles.input}/>
    </View>
) : null;

const welcome = welcomeDialog.visible ? (
    <View style={styles.buttonContainer}>
            <TouchableOpacity onPress={changeState("login")}style={[styles.button, styles.login]}>
                <Text style={styles.text}>Log In</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={changeState("signup")} style={[styles.button, styles.signUp]}>
                <Text style={styles.text}>Sign Up</Text>
            </TouchableOpacity>
        </View>
) : null;

function changeState(mode){
    if(mode === "login"){
        console.log("Yes");
        welcomeDialog.visible = false;
        loginDialog.visible = true;
    }else if(mode === "signup"){
        welcomeDialog.visible = false;
        signUpDialog.visible = true;
    }
}

return (
    <ImageBackground style={styles.background}
        source={require('../assets/welcome_background.jpg')}>
       
        {login}

        {signup}

        {welcome}
        
    </ImageBackground>
);
}

export default WelcomeScreen;

从“React”导入React；
从“react native”导入{ImageBackground，StyleSheet，TouchableOpacity，Text，View，TextInput}；
功能屏幕（道具）{
var loginDialog={
可见：假
};
变量注册对话框={
可见：假
};
var welcomeDialog={
可见：正确
};
const login=loginDialog.visible(
)：null；
const signup=signUpDialog.visible(
)：null；
const welcome=welcomeDialog.visible(
登录
注册
)：null；
功能更改状态（模式）{
如果（模式=“登录”）{
控制台日志（“是”）；
welcomeDialog.visible=false；
loginDialog.visible=true；
}否则如果（模式==“注册”）{
welcomeDialog.visible=false；
signUpDialog.visible=true；
}
}
返回(
{login}
{注册}
{欢迎}
);
}
导出默认屏幕；

看来你是个新来的反应者，你应该读一读关于状态的书。 您应该在functional component中使用useState，或者在class component中使用setState。我还建议您在对话框/模态中使用第三方库。

import React，{useState}来自“React”；
从“react native”导入{ImageBackground，StyleSheet，TouchableOpacity，Text，View，TextInput}；
功能屏幕（道具）{
const[loginDialog，setLoginDialog]=useState（false）；
const[signUpDialog，setSignUpDialog]=useState（false）；
const[welcomeDialog，setWelcomeDialog]=使用状态（false）；
const login=loginDialog(
)：null；
const signup=signUpDialog(
)：null；
康斯特欢迎=welcomeDialog(
登录
注册
)：null；
常量更改状态=（模式）=>{
如果（模式=“登录”）{
控制台日志（“是”）；
setWelcomeDialog（假）；
setLoginDialog（真）；
}否则如果（模式==“注册”）{
setWelcomeDialog（假）；
setSignUpDialog（true）；
}
}
返回(
{login}
{注册}
{欢迎}
);
}
导出默认屏幕；

import React, {useState} from 'react';
import { ImageBackground, StyleSheet, TouchableOpacity, Text, View, TextInput} from 'react-native';

function WelcomeScreen(props) {
  const [loginDialog,setLoginDialog] = useState(false);
  const [signUpDialog ,setSignUpDialog ] = useState(false);
   const [welcomeDialog ,setWelcomeDialog ] = useState(false);

const login = loginDialog ? (
    <View style={styles.loginDialog}>
        <TextInput style={styles.input}/>
    </View>
) : null;

const signup = signUpDialog? (
    <View style={styles.signUpDialog}>
        <TextInput style={styles.input}/>
    </View>
) : null;

const welcome = welcomeDialog? (
    <View style={styles.buttonContainer}>
            <TouchableOpacity onPress={changeState("login")}style={[styles.button, styles.login]}>
                <Text style={styles.text}>Log In</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={changeState("signup")} style={[styles.button, styles.signUp]}>
                <Text style={styles.text}>Sign Up</Text>
            </TouchableOpacity>
        </View>
) : null;

const changeState = (mode) => {
    if(mode === "login"){
        console.log("Yes");
        setWelcomeDialog(false);
        setLoginDialog(true);
    }else if(mode === "signup"){
        setWelcomeDialog(false);
        setSignUpDialog(true);
    }
}

return (
    <ImageBackground style={styles.background}
        source={require('../assets/welcome_background.jpg')}>
       
        {login}

        {signup}

        {welcome}
        
    </ImageBackground>
);
}

export default WelcomeScreen;