RN开发手机app之遍历组件与scrollView组件介绍

alltolove

用react遍历组件非常麻烦，还是没有js原生用起来灵活，他必须新建个数组没然后还要有个key属性，为了省事我就接着用昨天做好的组件，代码如下：

import React, { Component } from 'react';
import {
  AppRegistry,
  View,
  StyleSheet,
  ScrollView
} from 'react-native';
import Pic from './test.js'
export default class myreact extends Component {
  render() {
    return (
            <ScrollView showsVerticalScrollIndicator={false} >
                {this.itr()}
        </ScrollView>
    );
  }
  itr(){
          let a=[]
          for(let i=0;i<20;i++){
                  a.push(<Pic key={i}/>)
          }
          return a
  }
}

AppRegistry.registerComponent('myreact', () => myreact);

这上面的scrollView可以自动伸缩，非常方便，标签里showsVerticalScrollIndicator这个属性设置成假，可以去掉滚动条，一般手机上浏览新闻什么的都不需要滚动条，手机上显示的是20个重复的画面，如果想要内容不一样还需要用props关键字向子组件传参，这个明天再讲，手机上显示效果如下：（其实是可以用手往下滑动屏幕的，我比较懒就弄了个静态图片）

不二如是

代码中多加点注释，效果会更好