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

Posted 2022-11-26 wzfwaf

在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(
            <View> //这里要写父标签，要不会报错
                 errorMsg && <Text>errorMsg</Text> //如果有错误信息，就显示，没有就不显示
                //三元运算用法
                errorMsg ? <Text>errorMsg</Text> : "" 
            </View>
        )
    

也可以这样

index==1 ?(
   <View style=styles.center>
     <p>index为1时有内容，不为1时为空</p>
   </View>
   ) : (
   <Text />
)

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

再说一下在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 <Text>item,index</Text>;
     ;

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

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