/** * Sample React Native App * https://github.com/facebook/react-native */ var React = require('react-native'); var { AppRegistry,StyleSheet,Text,View,Image,} = React; var MyCell = React.createClass({ render(){ return( <View style={styles.CellStyle}> <Image source={this.props.ImageURL} style={styles.Image}/> <Text style = {styles.Text}>{this.props.Title}</Text> </View> ); } }); var zzc = React.createClass({ getInitialState(){ var data = [ {ImageURL:require("./testImages/1.jpg"),Title:"酒店"},{ImageURL:require("./testImages/2.jpg"),Title:"美食"},{ImageURL:require("./testImages/3.jpg"),{ImageURL:require("./testImages/1.jpg"),]; return { MyCells:data } },render() { return ( <View style = {{marginLeft:5,margin:20,marginRight:5}}> <View style={{flexDirection:'row',justifyContent:'center'}}> {this.state.MyCells.map(function(myCell){ return<MyCell ImageURL={myCell.ImageURL} Title={myCell.Title}/> })} </View> <View style={{flexDirection:'row',justifyContent:'center',margin:10}}> {this.state.MyCells.map(function(myCell){ return<MyCell ImageURL={myCell.ImageURL} Title={myCell.Title}/> })} </View> </View> ); } }); /*布局样式*/ var styles = StyleSheet.create({ Image:{ alignSelf:'center',width:45,height:45,borderRadius:8,},Text:{ marginTop:5,textAlign:'center',fontSize:11,color:'#555555',CellStyle:{ width:70,}); //注册应用入口AppRegistry.registerComponent('zzc',() => zzc);
效果图如下:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。