列表视图ListView 用来显示垂直滚动列表,需要指定两个东西,1 数据的来源 dataSource,2 渲染列表的条目布局 rendRow 'use strict' import React,{Component} from 'react'; import { AppRegistry,StyleSheet,Text,Image,View,ListView,} from 'react-native'; //import {AppRegistry,} from 'react-native'; //import Day0718 from './componets/Home' export default class Day0718 extends Component { constructor(props) { super(props); let movies = [ {title: '肖申克的救赎'},{title: '这个杀手不太冷'},{title: '阿甘正传'},{title: '霸王别姬'},{title: '美丽人生'},]; let dataSource = new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2}); this.state = { movies: dataSource.cloneWithRows(movies) }; } render() { return ( <View style={styles.Container}> <ListView dataSource={this.state.movies} renderRow={ movie => <Text style={styles.itemText}>{movie.title} </Text> } /> </View> ); } } const styles = StyleSheet.create({ overlay: { backgroundColor: 'rgba(0,0.3)',alignItems: 'center' },overlayHeader: { fontSize: 33,fontFamily: 'Helvetica Neue',fontWeight: '200',color: '#eae7ff',padding: 10 },overlaySubHeader: { fontSize: 16,padding: 10,paddingTop: 0,},backImage: { // alignItems:'center',flex: 1,//justifyContent:'center',resizeMode: 'cover',image: { height: 200,width: 100,justifyContent: 'center',item: { backgroundColor: '#fff',borderWidth: 1,borderColor: '#6435c9',margin: 6,itemOne: { // alignSelf:'flex-start',itemTwo: { //alignSelf:'center',itemThree: { flex: 2,itemText: { fontSize: 33,color: '#6435c9',padding: 30,Container: { //alignItems:'flex-start',// flex-start 靠在左边显示 center 居中 flex-end 尾部 // flexDirection: 'column',//row column 方向 backgroundColor: '#eae7ff',//center ; 居中 flex-end 位于底部 space-between/space-around屏幕平均分配 },Text: { color: '#6435c9',fontSize: 26,textAlign: 'center',fontStyle: 'italic',letterSpacing: 2,lineHeight: 33,fontWeight: '300',textDecorationLine: 'underline',textDecorationStyle: 'dashed',}); class ComText extends React.Component { render() { return ( <Text style={styles.itemText}> {this.props.children} </Text> ); } } AppRegistry.registerComponent('Day0718',() => Day0718);
模拟数据 展示ListView
---------------欢迎各位大神加群
----------------Android交流群:230274309
-----------------------------期待大神们的到来
------------------------一---起分享,一起进步!需要你们
原文链接:https://www.f2er.com/react/303380.html