React Native 基础练习指北(一)
原文链接:http://www.tinghaige.com/ 本着什么都要搀和的原则,一起来看看React Native是如何开发iOS APP。 围观本文需自备 做好准备之后,打开你的终端(或其他命令行利器),键入下面命令: npm install -g react-native-cli 和 react-native init AwesomeProject 此时,我们会看到一个名为
如果想要修改显示内容,请打开 接下来,我们按照教程,来展示一张电影海报,为了方便,我们直接修改 一、模拟数据在 var MOCKED_MOVIES_DATA = [ {title: 'Title',year: '2015',posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},]; 二、渲染我们需要展示电影的标题、年份以及缩略图,因此我们需要下面这些东西(看起来也不难理解): var { AppRegistry,Image,StyleSheet,Text,View,} = React; 下面,为了展示我们需要的内容,我们来修改一下 render: function() { var movie = MOCKED_MOVIES_DATA[0]; return ( <View style={styles.container}> <Text>{movie.title}</Text> <Text>{movie.year}</Text> <Image source={{uri: movie.posters.thumbnail}} /> </View> ) } 最直观的感受,就像是我们在Javascript代码中写了HTML代码, 接下来,我们为渲染出来的数据添加样式: var styles = StyleSheet.create({ container: { flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},thumbnail: { width: 53,height: 81,}); 我们可以使用 在这时候,教程说,海报图片( <Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail} /> 此时在模拟器中
这还没完,我们可以以一种更优美的方式来展示电影的信息,就是下面这个结构: +---------------------------------+ |+-------++----------------------+| || || Title || || Image || || || || Year || |+-------++----------------------+| +---------------------------------+ 我们只需要修改一下 return ( <View style={styles.container}> <Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail} /> <View style={styles.rightContainer}> <Text style={styles.title}>{movie.title}</Text> <Text style={styles.year}>{movie.year}</Text> </View> </View> ); 修改 container: { flex: 1,flexDirection: 'row', 在 rightContainer: { flex: 1, 样式内容写在 下面优化一下年份和标题的样式: title: { fontSize: 20,marginBottom: 8,textAlign: 'center',year: { textAlign: 'center', 此时在模拟器中
下次我们聊聊如何取回真实数据,当然,下次不一定是什么时候(LOL)。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |