react-native学习(二)

在程序的主目录下建立文件夹App，用于盛放我们写的js文件，在此文件夹下依次建立文件夹View/Home。并建立Index.js文件。

在Home文件夹下建立Groups.js文件，用atom编辑器打开。

添加如下代码：

'use strict';

 

var React = require('react-native');

var {

 StyleSheet,

 Text,

 View,

 Image

  } =React;

var GroupsView = React.createClass({

 render: function () {

   return (

     <View style={styles.container}>

     </View>

   );

  }

});

var styles = React.StyleSheet.create({

 container: {

   backgroundColor: '#ffffff',

   flex: 1,

  }

});

module.exports = GroupsView;

这样我们就创建了一个背景是白色，flex为1（此处就是占满整个屏幕）、名字为GroupsView的界面，

var GroupsView = React.createClass({

 render: function () {

   return (

     <View style={styles.container}>

     </View>

   );

  }

});

render: function ()就是渲染界面，需要在界面上添加别的一些控件，都可以在这里面添加。貌似是react-native每次界面显示的时候，都会调用此方法，也就是只要是显示，就需要先进行界面渲染。

var {

 StyleSheet,

 Text,

 View,

 Image

  } =React;

这种声明方法貌似是react-native的一种特有的（不是很清楚，毕竟刚开始学习）。这要这样声明了，在程序里就可以直接使用View、Text、Image等名称，否则，需要这样写React.View、React.Text、React.Image……

打开根目录下面的index.ios.js,复制如下代码把原有代码覆盖

'use strict';

 

var React = require('react-native');

var IndexView =require('./App/View/Index');

var {

 AppRegistry

} = React;

 

var newChild = React.createClass({

 render: function() {

   return (

     <IndexView/>

   );

  }

});

 

AppRegistry.registerComponent('newChild',() => newChild);

可以看到newChild这个类的渲染就是返回了IndexView这个view，而indexview返回的渲染就是GroupsView。运行看一下效果



一个空白界面显然离我们想要的首页效果还有很长的距离，不过整体思路就是再往GroupsView的渲染函数里面添加想要的一些控件了！

对GroupsView.js 做如下修改，

var GroupsView = React.createClass({

 render: function () {

   return (

     <View style={styles.container}>

       <Image style={styles.titleImage}

         source={require('image!toptianqi')}>

       </Image>

       <View style={styles.rowcontainer}>

         <View style={styles.itemcontainer}>

           <Image style={styles.itemImage}

             source={require('image!gushi01')}>

           </Image>

           <Text style={styles.titleText}>

              格林故事

           </Text>

         </View>

 

         <View style={styles.itemcontainer}>

           <Image style={styles.itemImage}

             source={require('image!gushi02')}>

           </Image>

           <Text style={styles.titleText}>

              格林故事

           </Text>

         </View>

 

         <View style={styles.itemcontainer}>

           <Image style={styles.itemImage}

             source={require('image!gushi03')}>

           </Image>

           <Text style={styles.titleText}>

              格林故事

           </Text>

         </View>

       </View>

 

       <View style={styles.rowcontainer}>

         <View style={styles.itemcontainer}>

           <Image style={styles.itemImage}

              source={require('image!gushi04')}>

           </Image>

           <Text style={styles.titleText}>

              格林故事

           </Text>

         </View>

 

         <View style={styles.itemcontainer}>

           <Image style={styles.itemImage}

              source={require('image!gushi05')}>

           </Image>

           <Text style={styles.titleText}>

              格林故事

           </Text>

         </View>

 

         <View style={styles.itemcontainer}>

           <Image style={styles.itemImage}

              source={require('image!gushi06')}>

           </Image>

           <Text style={styles.titleText}>

              格林故事

           </Text>

         </View>

       </View>

 

     </View>

   );

  }

});

在开始处需要添加变量：

var Dimensions = require('Dimensions');

//获取屏幕的宽高

var { width, height } =Dimensions.get('window');

添加样式：

var styles = React.StyleSheet.create({

 container: {

   backgroundColor: '#ffffff',

   flex: 1,

  },

 rowcontainer: {

   backgroundColor: '#ffffff',

   flexDirection:'row'

  },

 itemcontainer: {

   backgroundColor: '#ffffff',

   flex: 1,

   alignItems:'center'

  },

 titleText: {

   color: '#009688',

   fontSize: 17,

   fontWeight: '900',

   marginTop: 10

  },

 titleImage: {

   marginTop:45,

   marginLeft:0,

   marginRight:0,

   width:width,

   height:0.6*width,

   resizeMode:Image.resizeMode.contain

  },

 itemImage: {

   width:0.22*width,

   height:100,

   resizeMode:Image.resizeMode.contain

  }

});

对于flex布局，很多属性，现在我也不是十分清楚如何使用，这里使用的一些属性都是很容易让人理解的一些属性。至于flex布局教程，网上挺多。需要注意的是height:0.6*width, css里面也可以有运算符哦。运行下程序，看下结果：



react-native qq交流群：317120818