React native 如何加载给定条件的渲染'；如果'；在中国？

我在Chrome浏览器中使用调试模式，在iOS手机中使用模拟器expo。在我的应用程序中，我想渲染，但此渲染取决于“X”值

我有窗口1和窗口2，我想要：

• 如果X为===null，则加载窗口1，窗口1将转到窗口2
• 如果X是！==null，则直接加载到窗口2中，而不经过窗口1

这是我所有的导入内容

import React, {Component} from 'react';
import {View, Text, Button, TextInput, Alert,ScrollView,AsyncStorage} from 
'react-native';
import axios from 'axios';

let mgm = '!!Ups, Inseriu O Pin Errado, Insira O Correcto';

export default class PaginaInicial extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isLoaded: true}
    }
    HttpRequest(){
    axios({
        method: 'post',
        url: 'https://api.feetit.com/shoestorebranch/auth?
 key=q59Sgv0sRr0i9Qh00aWM071hB76NZh9WcW4o3HPPpw847OT8T17Sq62n3O7FTT9n',
        data: {
            loginHash: this.state.codigoPin,
        }
    }
    ).then((response) => {
        //AsyncStorage.removeItem('localData', () => {});
        this.setState({dados: response.data.response})
        console.log('SUCCESS');

        if(this.state.dados.admin === null){
            Alert.alert('Loja sem Administrador atribuido, por favor 
          contacte o suporte.');
        }else{

            //console.log(this.state.dados);
            let tmp_localData = {};
            console.log("tmp_localData: ", tmp_localData);
            AsyncStorage.getItem('localData', (err, result) => {
                tmp_localData = result;

            }).then( (result) => {
                    if(tmp_localData == null) {
                        tmp_localData = {
                            "ShoeStoreBranch": null,
                            "User": null
                        }
                    }
                    if (!tmp_localData.hasOwnProperty("ShoeStoreBranch")) {
                        tmp_localData.ShoeStoreBranch = {};
                    }
                    tmp_localData.ShoeStoreBranch = {
                        "shoeStoreBranchID": 
           this.state.dados.shoeStoreBranchID,
                        "name": this.state.dados.name,
                        "ShoeStore": {
                            "shoeStoreID": 
           this.state.dados.shoeStore.shoeStoreID,
                            "name": this.state.dados.shoeStore.name
                        }
                    };
                    tmp_localData.User = {
                        "userID": this.state.dados.admin.userID,
                        "displayName": this.state.dados.admin.displayName,
                        "email": this.state.dados.admin.email,
                        "avatar": this.state.dados.admin.avatar,
                        "gender": this.state.dados.admin.gender,
                        "Session": {
                            "token": this.state.dados.admin.token
                        },
                        "FootID": this.state.dados.admin.FootID
                    }
                    AsyncStorage.setItem('localData', 
           JSON.stringify(tmp_localData), () => {});
                    this.props.navigator.push({id: 'MenuPrincipal'})
            });
            //var tmp_dados = this.getState()
            //var qqer =this.state.dados.admin.token;
            //console.log(JSON.stringify(qqer));
        }
    }).catch((error) => {
            if (error.response) {
                // The request was made and the server responded with a 
                 status code
                // that falls out of the range of 2xx
                console.log(error.response.data);
                console.log(error.response.status);
                console.log(error.response.headers);
                if(error.response.status === 403){
                    console.log('App não tem autorização',error.message);
                    Alert.alert('App não tem autorização');
                }else if(error.response.status === 404){
                    console.log('PIN inválido',error.message);
                    Alert.alert('PIN inválido');
                    AsyncStorage.getItem('localData', (err, result) => {
                        console.log(result);
                    });
                }else if(error.response.status >=400 && 
       error.response.status <500){
                    console.log('Erro, por favor contactar o 
       suporte',error.message);
                    Alert.alert('Erro, por favor contactar o suporte');
                }else{
                    console.log('Erro interno, por favor contactar o suporte',error.message);
                    Alert.alert('Erro interno, por favor contactar o suporte');
                }
            } else if (error.request) {
                // The request was made but no response was received
                // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
                // http.ClientRequest in node.js
                console.log('erro de ligaçao',error.message);
                Alert.alert('erro de ligaçao');
                console.log(error.request);
            } else {
                // Something happened in setting up the request that triggered an Error
                console.log('erro de codigo no then',error.message);
                Alert.alert('App error');
            }
            console.log(error.config);
            //console.log('Erro ao imprimir ao enviar os dados')
        });
}

componentDidMount() {
    AsyncStorage.getItem('localData').then((result) => {
        this.setState({
            isLoading: false
        });
    });
}

我的组件的Css

const myStyle = {
principal: {
    paddingTop: 17,
    paddingLeft: 2,
    flex: 1,
    backgroundColor: 'black',
    justifyContent: 'center',
    alignItems: 'center',
},
caixa: {
    backgroundColor: 'white',
    height: 300,
    borderWidth: 1,
    width: 300,
    borderColor: 'black',
    alignItems: 'center',
    borderRadius: 20,
},
inputPin: {
    backgroundColor: 'white',
    width: 290,
    height: 40,
    borderRadius: 15,
    borderWidth: 1,
    borderColor: 'black',
    marginTop: 60,
    marginBottom: 30,
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: 20,
    //paddingLeft:20,
    color: 'black',
    textAlign: 'center'
},
bemVindo: {
    fontSize: 40,
    marginBottom: 20,
},
botao: {
    alignItems: 'center',
},
texto: {
    textAlign: 'center',
    fontSize: 20,
    color: 'black',
    backgroundColor: 'white',
   }
  }

我用extends宣布我的班级

import React, {Component} from 'react';
import {View, Text, Button, TextInput, Alert,ScrollView,AsyncStorage} from 
'react-native';
import axios from 'axios';

let mgm = '!!Ups, Inseriu O Pin Errado, Insira O Correcto';

export default class PaginaInicial extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isLoaded: true}
    }
    HttpRequest(){
    axios({
        method: 'post',
        url: 'https://api.feetit.com/shoestorebranch/auth?
 key=q59Sgv0sRr0i9Qh00aWM071hB76NZh9WcW4o3HPPpw847OT8T17Sq62n3O7FTT9n',
        data: {
            loginHash: this.state.codigoPin,
        }
    }
    ).then((response) => {
        //AsyncStorage.removeItem('localData', () => {});
        this.setState({dados: response.data.response})
        console.log('SUCCESS');

        if(this.state.dados.admin === null){
            Alert.alert('Loja sem Administrador atribuido, por favor 
          contacte o suporte.');
        }else{

            //console.log(this.state.dados);
            let tmp_localData = {};
            console.log("tmp_localData: ", tmp_localData);
            AsyncStorage.getItem('localData', (err, result) => {
                tmp_localData = result;

            }).then( (result) => {
                    if(tmp_localData == null) {
                        tmp_localData = {
                            "ShoeStoreBranch": null,
                            "User": null
                        }
                    }
                    if (!tmp_localData.hasOwnProperty("ShoeStoreBranch")) {
                        tmp_localData.ShoeStoreBranch = {};
                    }
                    tmp_localData.ShoeStoreBranch = {
                        "shoeStoreBranchID": 
           this.state.dados.shoeStoreBranchID,
                        "name": this.state.dados.name,
                        "ShoeStore": {
                            "shoeStoreID": 
           this.state.dados.shoeStore.shoeStoreID,
                            "name": this.state.dados.shoeStore.name
                        }
                    };
                    tmp_localData.User = {
                        "userID": this.state.dados.admin.userID,
                        "displayName": this.state.dados.admin.displayName,
                        "email": this.state.dados.admin.email,
                        "avatar": this.state.dados.admin.avatar,
                        "gender": this.state.dados.admin.gender,
                        "Session": {
                            "token": this.state.dados.admin.token
                        },
                        "FootID": this.state.dados.admin.FootID
                    }
                    AsyncStorage.setItem('localData', 
           JSON.stringify(tmp_localData), () => {});
                    this.props.navigator.push({id: 'MenuPrincipal'})
            });
            //var tmp_dados = this.getState()
            //var qqer =this.state.dados.admin.token;
            //console.log(JSON.stringify(qqer));
        }
    }).catch((error) => {
            if (error.response) {
                // The request was made and the server responded with a 
                 status code
                // that falls out of the range of 2xx
                console.log(error.response.data);
                console.log(error.response.status);
                console.log(error.response.headers);
                if(error.response.status === 403){
                    console.log('App não tem autorização',error.message);
                    Alert.alert('App não tem autorização');
                }else if(error.response.status === 404){
                    console.log('PIN inválido',error.message);
                    Alert.alert('PIN inválido');
                    AsyncStorage.getItem('localData', (err, result) => {
                        console.log(result);
                    });
                }else if(error.response.status >=400 && 
       error.response.status <500){
                    console.log('Erro, por favor contactar o 
       suporte',error.message);
                    Alert.alert('Erro, por favor contactar o suporte');
                }else{
                    console.log('Erro interno, por favor contactar o suporte',error.message);
                    Alert.alert('Erro interno, por favor contactar o suporte');
                }
            } else if (error.request) {
                // The request was made but no response was received
                // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
                // http.ClientRequest in node.js
                console.log('erro de ligaçao',error.message);
                Alert.alert('erro de ligaçao');
                console.log(error.request);
            } else {
                // Something happened in setting up the request that triggered an Error
                console.log('erro de codigo no then',error.message);
                Alert.alert('App error');
            }
            console.log(error.config);
            //console.log('Erro ao imprimir ao enviar os dados')
        });
}

componentDidMount() {
    AsyncStorage.getItem('localData').then((result) => {
        this.setState({
            isLoading: false
        });
    });
}

如果state.isloading为false，则我的场景比我想更改的场景要多

            {this.props.navigator.push({id: 'MenuPrincipal'})};

        }
    }

        const {principal, caixa, inputPin, bemVindo, botao, texto} = myStyle;
        return (
            <View style={principal}>
                <View style={caixa}>
                    <Text style={bemVindo}>Bem Vindo</Text>
                    <Text style={texto}>Para que possamos identificar-lhe, Indique a baixo o código pin</Text>
                    <TextInput placeholder='Código da Loja' style={inputPin}
                               onChangeText={(textoInput) => this.setState({codigoPin: textoInput})}
                    />
                    <Button title='Continuar'style={botao} onPress={() => {
                        this.HttpRequest();
                    }}
                    />
                </View>
            </View>
        );
    }
}

这里是state.isLoading为true时的状态

            {this.props.navigator.push({id: 'MenuPrincipal'})};

        }
    }

        const {principal, caixa, inputPin, bemVindo, botao, texto} = myStyle;
        return (
            <View style={principal}>
                <View style={caixa}>
                    <Text style={bemVindo}>Bem Vindo</Text>
                    <Text style={texto}>Para que possamos identificar-lhe, Indique a baixo o código pin</Text>
                    <TextInput placeholder='Código da Loja' style={inputPin}
                               onChangeText={(textoInput) => this.setState({codigoPin: textoInput})}
                    />
                    <Button title='Continuar'style={botao} onPress={() => {
                        this.HttpRequest();
                    }}
                    />
                </View>
            </View>
        );
    }
}

const{principal，caixa，inputPin，bemVindo，botao，texto}=myStyle；
返回(
本姆文多
在一辆汽车的后面，印着一个别针
this.setState（{codigoPin:textoInput}）}
/>
{
this.HttpRequest（）；
}}
/>
);
}
}

对于渲染基于条件的视图，您只需按条件返回视图即可。为了理解这一点，我们举个例子

export default class Home extends Component {
    constructor(props){
        super(props);
        this.state = {
           show = true
        }
     }

render(){
    if (this.state.show){
        return(
            <View>
                // this view visible when state.show is true
                <Text>Home is visible!</Text>
            </View>
        );
    } else if (!this.state.show){
        return(
            <View>
                // this view visible when state.show is false
                <Text>Home is not visible!</Text>
            </View>
        );
    } else {
        return(
            <View>
                <Text>Just visible, visible!</Text>
            </View>
        );
    }
  }
}

导出默认类主扩展组件{
建造师（道具）{
超级（道具）；
此.state={
show=true
}
}
render（）{
if（this.state.show）{
返回(
//当state.show为true时，此视图可见
家是可见的！
);
}否则如果（！this.state.show）{
返回(
//当state.show为false时，此视图可见
家不可见！
);
}否则{
返回(
只是看得见，看得见！
);
}
}
}

对于渲染基于条件的视图，您只需按条件返回视图即可。为了理解这一点，我们举个例子

export default class Home extends Component {
    constructor(props){
        super(props);
        this.state = {
           show = true
        }
     }

render(){
    if (this.state.show){
        return(
            <View>
                // this view visible when state.show is true
                <Text>Home is visible!</Text>
            </View>
        );
    } else if (!this.state.show){
        return(
            <View>
                // this view visible when state.show is false
                <Text>Home is not visible!</Text>
            </View>
        );
    } else {
        return(
            <View>
                <Text>Just visible, visible!</Text>
            </View>
        );
    }
  }
}

导出默认类主扩展组件{
建造师（道具）{
超级（道具）；
此.state={
show=true
}
}
render（）{
if（this.state.show）{
返回(
//当state.show为true时，此视图可见
家是可见的！
);
}否则如果（！this.state.show）{
返回(
//当state.show为false时，此视图可见
家不可见！
);
}否则{
返回(
只是看得见，看得见！
);
}
}
}

请阅读-总结是，这不是向志愿者讲话的理想方式，可能会对获得答案产生反作用。请不要将此添加到您的问题中。请阅读-总结是，这不是解决志愿者问题的理想方式，可能会对获得答案产生反作用。请不要在你的问题中添加这些。我会尝试这样做，如果我做得好，我会回来问你。谢谢你的时间。如果（+1）{“谢谢！”}否则{“那就给我吧。”}我会尝试这样做，如果我做得好，我会回到aswer。谢谢你的时间。如果（+1）{“谢谢！”}否则{“那就给我吧。”}