React Native - 使用Text组件实现列表（List）展示功能

本文演示如何通过文本标签组件（Text组件）的叠加组合，实现一个展示列表。

样式一

1，效果图

2，样例代码

我们首先创建一个单独的单元格组件（ListItem），然后通过一个个单独的单元格拼接成完整的表格。

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 View,
} from 'react-native';

class ListItem extends Component {
   render() {
     return (
       <View style={styles.list_item}>
         <Text style={styles.list_item_font}>{this.props.title}</Text>
       </View>
     );
   }
 }

class Main extends Component {
   render() {
     return (
       <View style={styles.flex,{marginTop:35}}>
         <ListItem title='Swift - 滑块（UISlider）的用法'></ListItem>
         <ListItem title='Swift - 告警框（UIAlertView）的用法'></ListItem>
         <ListItem title='Swift - 选择框（UIPickerView）的用法'></ListItem>
         <ListItem title='Swift - 操作表（UIActionSheet）的用法'></ListItem>
         <ListItem title='Swift - 滚动视图（UIScrollView）的用法'></ListItem>
       </View>
     );
   }
 }

 const styles = StyleSheet.create({
  flex:{
     flex:1
  },
  list_item:{
    height:40,
    marginLeft:10,
    marginRight:10,
    borderBottomWidth:1,
    borderBottomColor: '#ddd',
    justifyContent: 'center'
  },
  list_item_font:{
    fontSize:16
  },
 });

 AppRegistry.registerComponent('HelloWorld', () => Main);

3，功能改进

（1）直接封装一个 List 组件，根据传入的标题数组自动在内部创建相应的单元格。
（2）同时点击单元格还会把该单元格中的内容打印出来。

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 View,
} from 'react-native';

class List extends Component {
   show(title) {
     alert(title);
   }
   render() {
     var news = [];
     for(var i in this.props.news){
       var text = (
         <View key={i} style={styles.list_item}>
           <Text
             onPress={this.show.bind(this, this.props.news[i])}
             numberOfLines={1}
             style={styles.list_item_font}>
             {this.props.news[i]}
           </Text>
         </View>
       );
       news.push(text);
     }
     return (
       <View style={styles.flex}>
         {news}
       </View>
     );
   }
 }

class Main extends Component {
   render() {
     var news = [
        'Swift - 滑块（UISlider）的用法',
        'Swift - 告警框（UIAlertView）的用法',
        'Swift - 选择框（UIPickerView）的用法',
        'Swift - 操作表（UIActionSheet）的用法',
        'Swift - 滚动视图（UIScrollView）的用法'
     ];
     return (
       <View style={styles.flex,{marginTop:35}}>
         <List news={news}></List>
       </View>
     );
   }
 }

 const styles = StyleSheet.create({
  flex:{
     flex:1
  },
  list_item:{
    height:40,
    marginLeft:10,
    marginRight:10,
    borderBottomWidth:1,
    borderBottomColor: '#ddd',
    justifyContent: 'center'
  },
  list_item_font:{
    fontSize:16
  },
 });

 AppRegistry.registerComponent('HelloWorld', () => Main);

样式二

1，效果图

2，样例代码

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 View,
} from 'react-native';

var Goods = [
  {
    title: '步步高点读机',
    price: 499
  },
  {
    title: '金立M2017',
    price: 7999
  },
  {
    title: '莫斯利安酸奶3箱',
    price: 199
  },
  {
    title: '美国大菠萝3袋',
    price: 199
  },
  {
    title: '苹果电脑macbook',
    price: 8999
  }
];

class List extends Component {
   show(title) {
     alert(title);
   }
   render() {
     var data = this.props.goods;
     var list = [];
     for(var i in data){
       var item = (
         <View key={i} style={[styles.row, styles.list_item]}>
           <Text style={styles.list_item_desc}>
             {data[i].title}
             {data[i].desc}
           </Text>
           <Text style={styles.list_item_price}>¥{data[i].price}</Text>
         </View>
       );
       list.push(item);
     }
     return (
       <View style={styles.flex}>
         {list}
       </View>
     );
   }
 }

class Main extends Component {
   render() {
     return (
       <View style={styles.flex,{marginTop:35}}>
         <List goods={Goods}></List>
       </View>
     );
   }
 }

 const styles = StyleSheet.create({
  flex:{
     flex:1
  },
  row:{
    flexDirection: 'row',
    marginBottom: 10,
  },
  list_item:{
    marginLeft:5,
    marginRight:5,
    padding:5,
    borderWidth:1,
    height:30,
    borderRadius:3,
    borderColor:'#ddd'
  },
  list_item_desc:{
    flex:2,
    fontSize:15
  },
  list_item_price:{
    flex:1,
    textAlign:'right',
    fontSize:15
  },
 });

 AppRegistry.registerComponent('HelloWorld', () => Main);