这几天一直在写 react native 静态 UI 写一些视图的时候用到 for 和 if 这里记录一下吧…

for 循环返回视图

在很多场景中我们需要for循环返回视图，那么如何for循环返回视图呢？直接来个栗子吧 ～

  render(){
    console.log('首页刷新');
    let renderList = [require('./img/1.jpg'),require('./img/2.jpg'),require('./img/3.jpg'),require('./img/4.jpg')];
    return(

      <View>
        <Swiper style={styles.wrapper} height={200} autoplay>
          {
            renderList.map((item,idx)=>{
              return(
                <View key={idx} style={styles.slide}>
                  <Image resizeMode='stretch' style={styles.image} source={item} />
                </View>

              )
            })
          }
        </Swiper>


      </View>

    );
  }
  

if 判断，返回视图

很多情况下，如果有数据就暂时某个视图，如果没数据就不展示视图，那如何在render中的return里面判断然后再返回相对于的视图呢，不废话了，直接栗子

render(){
    console.log('首页刷新');
    let dataSoureeee;
    return(

      <View>

        {
          dataSoureeee != null?(
            <View><Text>有东西</Text></View>
          ):(
            <View><Text>无东西</Text></View>
          )
        }

      </View>

    );
  }
  

其他 React Native 小技巧

React Native FlatList 隐藏滚动条问题

// 隐藏水平
showsHorizontalScrollIndicator = {false}

// 隐藏垂直
showsVerticalScrollIndicator = {false}