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

alltolove

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

1. import React, { Component } from 'react';
   
2. import {
   
3.   AppRegistry,
   
4.   View,
   
5.   StyleSheet,
   
6.   ScrollView
   
7. } from 'react-native';
   
8. import Pic from './test.js'
   
9. export default class myreact extends Component {
   
10.   render() {
    
11.     return (
    
12.             <ScrollView showsVerticalScrollIndicator={false} >
    
13.                 {this.itr()}
    
14.         </ScrollView>
    
15.     );
    
16.   }
    
17.   itr(){
    
18.           let a=[]
    
19.           for(let i=0;i<20;i++){
    
20.                   a.push(<Pic key={i}/>)
    
21.           }
    
22.           return a
    
23.   }
    
24. }
    
25. 
    
26. AppRegistry.registerComponent('myreact', () => myreact);
    

复制代码

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

不二如是

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