在React native 如何写if判断和for循环

在vue中一般在需要判断时都是通过if语句来实现的，但是在react native中一般则通过三元运算法来实现。

具体代码如下所示。

import React from 'react';
import { View, Image, TextInput, Text } from 'react-native';
class BindCard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          errorMsg: ""
        };
      }
      render(){
            let {errorMsg} = this.state;
        return(
             //这里要写父标签，要不会报错
                { errorMsg && {errorMsg}} //如果有错误信息，就显示，没有就不显示
                //三元运算用法
                {errorMsg ? {errorMsg} : "" }
            
        )
    }
}

也可以这样

{index==1 ?(
   
     
index为1时有内容，不为1时为空
   
   ) : (
   
)}

其实两种写法差不多，也都很容易理解，就不多说了。

再说一下在react native中如何进行循环

import React from 'react';
import { View, Image, TextInput, Text } from 'react-native';
class BindCard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          list: [1,2,3,4,5],
          data:[{
         id:1,
         list:[1,2,3]
        },{
         id:2,
         list:[4,5,6]
        }]
        };
      }
      
    keyExtractor = item => item.id;
    
     renderItem = ({ item, index }) => {
         return {item},{index};
     };

      render(){
            let {list} = this.state;
        return(
             //这里要写父标签，要不会报错
                //第一种写法
                {  list && list.map(info,index)=>(
                    {info},{index}
                )}
                //第二种写法
                {list.map((info, index) => {
                        return (
                         {info},{index}
                        );
                  })}
                  //第三种写法
                  <FlatList
                        data={list}
                        keyExtractor={this.keyExtractor}
                        renderItem={this.renderItem}
                        style={{ height: ‘500px’}}
                      />
                      //双循环写法
                      {
                    data.map(item,index)=>(
                        
                            { item.list.map(info,index)=>{
                                return(
                                    {info},index
                                )
                            }}
                        
                    )
                }
            
        )
    }
}

上面就是关于react native 中的条件判断和循环的写法了，希望对你有帮助。