I need to conditionally render one of 3 templates. The way I want it set up is as I describe: Login Form (default) -> Register Form (when click Register button) -> Login Form (after click Register button on Register template) -> Manage Account template.

我需要有条件地呈现3个模板之一。我希望它的设置方式如我所述：登录表单(默认)->注册表单(当单击注册按钮时)->登录表单(在注册模板上单击注册按钮后)->管理帐户模板。

I have read and tried implementing the suggested way of doing this as mentioned in this document here: https://www.reactnative.express/react/conditional_rendering.

我已经阅读并尝试实现本文档中提到的建议方法：https://www.reactnative.express/react/conditional_rendering.

But, it is not working properly.

但是，它不能正常工作。

Here is my code:

以下是我的代码：

import { StyleSheet, Button } from 'react-native';
import React, {useEffect, useState} from 'react';
import {View, TextInput, TouchableOpacity, Linking} from 'react-native';
import EditScreenInfo from '../../components/EditScreenInfo';
import { Text  } from '../../components/Themed';
import axios from 'axios';
import { Constants } from '../../constants/Constants';
import AsyncStorage from '@react-native-async-storage/async-storage';


export default function TabOneScreen() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")

  const [showRegisterForm, setShowRegisterForm] = useState(false)
  const [afterRegister, setAfterRegister] = useState(false)
  const [afterLogin, setAfterLogin] = useState(false)
  const [firstName, setFirstName] = useState("")
  const [lastName, setLastName] = useState("")
  const [userEmail, setUserEmail] = useState("")
  const [userPassword, setUserPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [stripeConnectAcctId, setStripeConnectAcctId] = useState("")

  const subdomain = Constants.Subdomain;

  const onPressLogin = async () => {
    console.log('email: ', email);
    console.log('password: ', password);

    var req_json = { Email: email, Password: password};

    console.log(req_json);

    var headers = 
    { 
      headers: 
      { 
          //"Authorization" : `Bearer ${auth_token}`, 
          "Accept" : "*/*",
          "Connection": "keep-alive",
          "Accept-Encoding": "gzip, deflate, br",
          "Content-Type": "application/json",
          "Cache-Control": "no-cache",
          "Host": subdomain + ".conveyor.cloud"
      }
    };

    //await axios.get('https://' + subdomain + '.conveyor.cloud/Account/Login/?email=' + email + "&password=" + password);

    // acquire token, set that in javascript as a cookie/save it globally and refer to it
    var req_json2 = {username: email, password: password, grant_type: 'password'}

    var headers2 = 
    { 
      headers: 
      { 
          //"Authorization" : `Bearer ${auth_token}`, 
          "Accept" : "*/*",
          "Connection": "keep-alive",
          "Accept-Encoding": "gzip, deflate, br",
          "Content-Type": "application/x-www-form-urlencoded",
          "Cache-Control": "no-cache",
          "Host": subdomain + ".conveyor.cloud"
      }
    };

    const resp = await axios.post('https://' + subdomain + '.conveyor.cloud/token', req_json2, headers2);
    
    const token = resp.data.access_token;

    if(token != null && token != "") {
      console.log("auth_token: " + token);
      AsyncStorage.setItem('auth_token', token);
      AsyncStorage.setItem('senderEmail', email);
    }
    
    setAfterLogin(true)
  }

  const showRegistrationForm = () => {
    setShowRegisterForm(true);
  }

  const stripeOnboarding = async () => {
    var headers = 
    { 
      headers: 
      { 
          //"Authorization" : `Bearer ${auth_token}`, 
          "Accept" : "*/*",
          "Connection": "keep-alive",
          "Accept-Encoding": "gzip, deflate, br",
          "Content-Type": "application/x-www-form-urlencoded",
          "Cache-Control": "no-cache",
          "Host": subdomain + ".conveyor.cloud"
      }
    };

    const resp = await axios.post('https://' + subdomain + '.conveyor.cloud/Home/CreateStripeAccount', {}, headers);
    
    console.log(resp.data.connectedAccountId, resp.data.onboardingUrl)

    if(resp) {
     setStripeConnectAcctId(resp.data.connectedAccountId);

     const auth_token = AsyncStorage.getItem('auth_token');
     const senderEmail = AsyncStorage.getItem('senderEmail');
     
     const req_json = {email: senderEmail, stripeConnectedAcctId: resp.data.connectedAccountId };

      var headers2 = 
      { 
        headers: 
        { 
            "Authorization" : `Bearer ${auth_token}`, 
            "Accept" : "*/*",
            "Connection": "keep-alive",
            "Accept-Encoding": "gzip, deflate, br",
            "Content-Type": "application/x-www-form-urlencoded",
            "Cache-Control": "no-cache",
            "Host": subdomain + ".conveyor.cloud"
        }
      };
  
      const resp2 = await axios.post('https://' + subdomain + '.conveyor.cloud/Account/SaveStripeAcctId', req_json, headers2);

      if (await Linking.canOpenURL(resp.data.onboardingUrl)) {
        await Linking.openURL(resp.data.onboardingUrl);
      }
    }
  }

  const submitRegistrationForm = async () => {
    var req_json = {
      FirstName: firstName, 
      LastName: lastName,
      Email: userEmail,
      Password: userPassword,
      ConfirmPassword: confirmPassword
    }

    var headers = 
    { 
      headers: 
      { 
          //"Authorization" : `Bearer ${auth_token}`, 
          "Accept" : "*/*",
          "Connection": "keep-alive",
          "Accept-Encoding": "gzip, deflate, br",
          "Content-Type": "application/x-www-form-urlencoded",
          "Cache-Control": "no-cache",
          "Host": subdomain + ".conveyor.cloud"
      }
    };

    const resp = await axios.post('https://' + subdomain + '.conveyor.cloud/Account/Register', req_json, headers);

    setAfterRegister(true)
  }

  return (
    (!afterLogin &&
    (afterRegister ||
    (!showRegisterForm && (
      <View style={styles.container}>
        <View style={styles.inputView}>
          <TextInput
            style={styles.inputText}
            placeholder="Email"
            placeholderTextColor="#003f5c"
            onChangeText={(text) => setEmail(text)}
          />
        </View>
        <View style={styles.inputView}>
          <TextInput
            style={styles.inputText}
            secureTextEntry
            placeholder="Password"
            placeholderTextColor="#003f5c"
            onChangeText={(text) => setPassword(text)}
          />
        </View>
        <View style={styles.inputView}>
        <TouchableOpacity
          onPress = {onPressLogin}
          style={styles.loginBtn}>
          <Text>Log in.</Text>
        </TouchableOpacity>
        </View>
        <View>
          <Button
            onPress={() => {setShowRegisterForm(!showRegisterForm)}}
            style={styles.registerBtn}
            title='Register'
          />
        </View>
      </View>
    )))) || 
    (!afterRegister &&
    (showRegisterForm &&
      <View>
        <Text>Registration Form.</Text>
        <TextInput placeholder='First name' onChangeText={text => setFirstName(text)} style={styles.registerFormField}></TextInput>
        <TextInput placeholder='Last name' onChangeText={text => setLastName(text)} style={styles.registerFormField}></TextInput>
        <TextInput placeholder='Email address' onChangeText={text => setUserEmail(text)} style={styles.registerFormField}></TextInput>
        <TextInput placeholder='Password' onChangeText={text => setUserPassword(text)} style={styles.registerFormField} secureTextEntry></TextInput>
        <TextInput placeholder='Confirm password' onChangeText={text => setConfirmPassword(text)} style={styles.registerFormField} secureTextEntry></TextInput>
        <Button onPress={submitRegistrationForm} title='Register'/>
      </View>
    )) ||
    (afterLogin && 
      <View>
          <Text>Manage Account.</Text>
          <Button onPress={stripeOnboarding} title='Connect with Stripe'/>
      </View>
    )
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: '80%',
  },
  inputView:{
    width:"80%",
    backgroundColor:"#3AB4BA",
    borderRadius:25,
    height:50,
    marginBottom:20,
    justifyContent:"center",
    padding:20
  },
  inputText:{
    height:50,
    color:"white"
  },
  loginBtn: {
    
  },
  registerBtn: {
    marginTop:35,
    padding:8,
    borderColor:'black',
    borderWidth:2,
    borderRadius:5
  },
  button: {
    borderRadius: 20,
    borderColor: '#fff',
    borderWidth:2,
    padding: 10,
    elevation: 2,
    marginTop: 15,
    color:'black'
  },
  registerFormField: {
    margin:8,
    borderColor: 'black',
    borderWidth: 2,
    padding:5
  }
});

How might I modify the code to achieve the desired behavior mentioned above?

我如何修改代码以实现上面提到的所需行为？

Thank you.

谢谢。

I have created an example

我已经创造了一个例子

    const ConRendering = () => {
      const [showRegisterForm, setShowRegisterForm] = React.useState(false);
    
      return (
        (showRegisterForm && ( // Use && or || operator insztead of if
          <TouchableOpacity
            onPress={() => {
              setShowRegisterForm(!showRegisterForm);
            }}>
            <View style={styles.redBox} />
          </TouchableOpacity>
        )) ||
        (!showRegisterForm && (
          <TouchableOpacity
            onPress={() => {
              setShowRegisterForm(!showRegisterForm);
            }}>
            <View style={styles.greenBox} />
          </TouchableOpacity>
        ))
      );
    };