react-native组件学习(二)

今天初步学习了react中的一些组件，跟大家分享一下：

DrawerLayoutAndroid

DrawerLayoutAndroid是android上专有的组件，类似有android上的DrawerLayout布局，用来设置滑动抽屉的，该组件是通过renderNavigationView方法来渲染的：

DrawerLayoutAndroid 常用属性

有如下属性：

drawerPosition 指定抽屉从屏幕的那一侧划出
drawerWidth 指定抽屉的宽度
keyboardDismissMode
指定在滑动过程中是否隐藏软键盘。有如下取值：
1.none 默认值，在滑动过程中不隐藏软键盘
2.on-drag 在滑动开始时候，即隐藏软键盘
onDrawerClose 当抽屉关闭时候，回调该方法
onDrawerOpen 当抽屉打开时候回调该方法
onDrawerSlide 当抽屉产生交互效果时候，回调该方法
onDrawerStateChanged 当抽屉的状态发生变化时，回调该方法
先看下效果吧。

全部代码如下：

'use strict'; //启用严苛模式 var React = require('react-native'); //声明需要使用到的组件 var { AppRegistry,DrawerLayoutAndroid,StyleSheet,Text,View,} = React; var firstProject = React.createClass({ // render方法用于将下面一系列的末班转换成html，用来显示 render: function() { // 创建抽屉栏需要显示的内容 var navigationView = ( <View@H_301_37@ style@H_301_37@=@H_301_37@@H_301_37@{{flex@H_301_37@: 1,backgroundColor@H_301_37@: '#fff@H_301_37@'}}@H_301_37@>@H_301_37@ <Text@H_301_37@ style@H_301_37@=@H_301_37@@H_301_37@{{margin@H_301_37@: 20,fontSize@H_301_37@: 20,backgroundColor@H_301_37@: "red"@H_301_37@,textAlign@H_301_37@: 'left@H_301_37@'}}@H_301_37@>@H_301_37@First drawer</Text@H_301_37@>@H_301_37@ <Text@H_301_37@ style@H_301_37@=@H_301_37@@H_301_37@{{margin@H_301_37@: 20,backgroundColor@H_301_37@: "blue"@H_301_37@,textAlign@H_301_37@: 'left@H_301_37@'}}@H_301_37@>@H_301_37@Second drawer</Text@H_301_37@>@H_301_37@ </View@H_301_37@>@H_301_37@ ); return ( <DrawerLayoutAndroid @H_301_37@ drawerWidth@H_301_37@={300}@H_301_37@ //抽屉组件的宽度 drawerPosition@H_301_37@={DrawerLayoutAndroid.positions.Left}@H_301_37@ //指定弹出的方向 // 通过renderNavigationView@H_301_37@方法渲染一个抽屉组件，其内容就是显示主视图 renderNavigationView@H_301_37@={()@H_301_37@ =>@H_301_37@ navigationView}> <View@H_301_37@ style@H_301_37@=@H_301_37@@H_301_37@{{flex@H_301_37@: 1,alignItems@H_301_37@: 'center@H_301_37@'}}@H_301_37@>@H_301_37@ <Text@H_301_37@ style@H_301_37@=@H_301_37@@H_301_37@{{margin@H_301_37@: 10,fontSize@H_301_37@: 15,textAlign@H_301_37@: 'right@H_301_37@'}}@H_301_37@>@H_301_37@Hello</Text@H_301_37@>@H_301_37@ <Text@H_301_37@ style@H_301_37@=@H_301_37@@H_301_37@{{margin@H_301_37@: 10,textAlign@H_301_37@: 'right@H_301_37@'}}@H_301_37@>@H_301_37@World!</Text@H_301_37@>@H_301_37@ </View@H_301_37@>@H_301_37@ </DrawerLayoutAndroid@H_301_37@>@H_301_37@ ); } }) AppRegistry.registerComponent('firstProject',() => firstProject);@H_301_37@

查看log

在开发中，经常会遇到log的打印，而我们可以通过google浏览器的开发者模式来查看react中打印的log，先看代码：

var firstProject = React.createClass({ // render方法用于将下面一系列的末班转换成html，用来显示 render: function() { // 创建抽屉栏需要显示的内容 var navigationView = ( <View@H_301_37@ style@H_301_37@=@H_301_37@@H_301_37@{{flex@H_301_37@: 1,textAlign@H_301_37@: 'left@H_301_37@'}}@H_301_37@>@H_301_37@Second drawer</Text@H_301_37@>@H_301_37@ </View@H_301_37@>@H_301_37@ ); return ( <DrawerLayoutAndroid @H_301_37@ drawerWidth@H_301_37@={200}@H_301_37@ //抽屉组件的宽度 drawerPosition@H_301_37@={DrawerLayoutAndroid.positions.Right}@H_301_37@ //指定弹出的方向 // 通过renderNavigationView@H_301_37@方法渲染一个抽屉组件，其内容就是显示主视图 renderNavigationView@H_301_37@={()@H_301_37@ =>@H_301_37@ navigationView} onDrawerClose={() => console.log('DrawerLayoutAndroid onDrawerClose!')} onDrawerOpen={() => console.log('DrawerLayoutAndroid onDrawerOpen!')} onDrawerStateChanged={() => console.log('DrawerLayoutAndroid onDrawerStateChanged!')} > <View@H_301_37@ style@H_301_37@=@H_301_37@@H_301_37@{{flex@H_301_37@: 1,textAlign@H_301_37@: 'right@H_301_37@'}}@H_301_37@>@H_301_37@World!</Text@H_301_37@>@H_301_37@ </View@H_301_37@>@H_301_37@ </DrawerLayoutAndroid@H_301_37@>@H_301_37@ ); } })@H_301_37@

这里我为DrawerLayoutAndroid添加了三个事件的监听，点击menu，选择”chrome debug”选项。打开谷歌浏览器，F12，此时效果如下：

ProgressBarAndroid

该组件类似于android平台的ProgressBar，用于显示正在加载的进度条,有如下属性：

color string 

进度条的颜色。

indeterminate indeterminateType 

决定进度条是否要显示一个不确定的进度。注意这个在styleAttr是Horizontal@H_301_37@的时候必须是false。

progress number 

当前的进度值（在0@H_301_37@到1@H_301_37@之间）。

styleAttr STYLE_ATTRIBUTES 

进度条的样式。可取值有：

Horizontal@H_301_37@
Small@H_301_37@
Large@H_301_37@
Inverse@H_301_37@
SmallInverse

先看下运行效果：

完整代码如下：

'use strict'; var React = require('react-native'); var ProgressBar = require('ProgressBarAndroid'); var { AppRegistry,Image,} = React; var secondProject = React.createClass({ render: function() { return ( <View@H_301_37@>@H_301_37@ <Text@H_301_37@ style@H_301_37@={styles.fontstyle}@H_301_37@>@H_301_37@ styleAttr="Inverse"</Text@H_301_37@>@H_301_37@ <ProgressBar@H_301_37@ styleAttr@H_301_37@="Inverse"@H_301_37@ style@H_301_37@=@H_301_37@@H_301_37@{{color@H_301_37@: "red"@H_301_37@}}@H_301_37@/>@H_301_37@ <View@H_301_37@ style@H_301_37@={styles.viewstyle}@H_301_37@>@H_301_37@</View@H_301_37@>@H_301_37@ <Text@H_301_37@ style@H_301_37@={styles.fontstyle}@H_301_37@>@H_301_37@ styleAttr="Horizontal"</Text@H_301_37@>@H_301_37@ <ProgressBar@H_301_37@ styleAttr@H_301_37@="Horizontal"@H_301_37@ style@H_301_37@=@H_301_37@@H_301_37@{{color@H_301_37@: "blue"@H_301_37@,width@H_301_37@:300,height@H_301_37@: 20}}@H_301_37@/>@H_301_37@ <View@H_301_37@ style@H_301_37@={styles.viewstyle}@H_301_37@>@H_301_37@</View@H_301_37@>@H_301_37@ <Text@H_301_37@ style@H_301_37@={styles.fontstyle}@H_301_37@>@H_301_37@ styleAttr="Small"</Text@H_301_37@>@H_301_37@ <ProgressBar@H_301_37@ styleAttr@H_301_37@="Small"@H_301_37@/>@H_301_37@ <View@H_301_37@ style@H_301_37@={styles.viewstyle}@H_301_37@>@H_301_37@</View@H_301_37@>@H_301_37@ <Text@H_301_37@ style@H_301_37@={styles.fontstyle}@H_301_37@>@H_301_37@ styleAttr="Large"</Text@H_301_37@>@H_301_37@ <ProgressBar@H_301_37@ styleAttr@H_301_37@="Large"@H_301_37@ style@H_301_37@=@H_301_37@@H_301_37@{{color@H_301_37@: "green"@H_301_37@}}@H_301_37@/>@H_301_37@ <View@H_301_37@ style@H_301_37@={styles.viewstyle}@H_301_37@>@H_301_37@</View@H_301_37@>@H_301_37@ <Text@H_301_37@ style@H_301_37@={styles.fontstyle}@H_301_37@>@H_301_37@ styleAttr="SmallInverse"</Text@H_301_37@>@H_301_37@ <ProgressBar@H_301_37@ styleAttr@H_301_37@="SmallInverse"@H_301_37@/>@H_301_37@ <View@H_301_37@ style@H_301_37@={styles.viewstyle}@H_301_37@>@H_301_37@</View@H_301_37@>@H_301_37@ <Text@H_301_37@ style@H_301_37@={styles.fontstyle}@H_301_37@>@H_301_37@ styleAttr="LargeInverse"</Text@H_301_37@>@H_301_37@ <ProgressBar@H_301_37@ styleAttr@H_301_37@="LargeInverse"@H_301_37@/>@H_301_37@ <View@H_301_37@ style@H_301_37@={styles.viewstyle}@H_301_37@>@H_301_37@</View@H_301_37@>@H_301_37@ </View@H_301_37@>@H_301_37@ ); },}); var styles = StyleSheet.create({ container: { flex: 1,flexDirection: 'row',justifyContent: 'center',},fontstyle: { color: "blue",fontSize: 20,textAlign: "center",viewstyle: { borderColor: "red",borderWidth: 1,} }); AppRegistry.registerComponent('secondProject',() => secondProject);@H_301_37@

为ProgressBarAndroid 进度条指定进度

先看下效果吧：

引入的模块

var@H_301_37@ React = require@H_301_37@('react-native'@H_301_37@);
var@H_301_37@ ProgressBar = require@H_301_37@('ProgressBarAndroid'@H_301_37@); //引入ProgressBarAndroid模块@H_301_37@
var@H_301_37@ TimerMixin = require@H_301_37@('react-timer-mixin'@H_301_37@); //引入计时器模块@H_301_37@

创建一个MovingBar组件

var@H_301_37@ MovingBar = React.createClass({
  mixins: [TimerMixin],//通过getInitialState方法为progress设置初始值@H_301_37@
  getInitialState: function@H_301_37@()@H_301_37@ {@H_301_37@
    return@H_301_37@ {
      progress: 0@H_301_37@
    };
  },//componentDidMount，该方法在初始化渲染执行之后立刻调用一次@H_301_37@
  componentDidMount: function@H_301_37@()@H_301_37@ {@H_301_37@
    //调用setInterval方法，每隔50毫秒，将当前进度增加5个@H_301_37@
    this@H_301_37@.setInterval(
      () => {
        var@H_301_37@ progress = (this@H_301_37@.state.progress + 0.02@H_301_37@) % 1@H_301_37@;
        this@H_301_37@.setState({progress: progress});
      },50@H_301_37@
    );
  },render: function@H_301_37@()@H_301_37@ {@H_301_37@
    //这里由于返回用于显示的组件是一个数组，即有多个组件，因此使用()来包裹起来@H_301_37@
    return@H_301_37@ (
         <View>
            <ProgressBar progress={this@H_301_37@.state.progress} {...this@H_301_37@.props} />
            <Text>
            当前进度：{Math.round(this@H_301_37@.state.progress * 100@H_301_37@) + "%"@H_301_37@}
            </Text>
         </View>
      );
  },});

在项目中显示 自定义的Movingbar组件

var@H_301_37@ secondProject = React.createClass({
render: function@H_301_37@()@H_301_37@ {@H_301_37@ 
  return@H_301_37@ (
    <View>
      <MovingBar styleAttr="Horizontal"@H_301_37@ indeterminate={false@H_301_37@} />
    </View>
  );
  },});

这里由于是水平进度的，所有indeterminate属性值必须是false

Switch控件学习

ok，下面学习Switch空间，先看一个简单的效果吧：

Switch控件基本实例

代码也很简单：

引入SwitchAndroid模块

var@H_301_37@ SwitchAndroid = require@H_301_37@('SwitchAndroid'@H_301_37@);

设置初始状态

getInitialState: function@H_301_37@()@H_301_37@ {@H_301_37@
    return@H_301_37@ {
      switchIsOn: true@H_301_37@,};
},

这里为其switchIsOn属性设定了一个初始状态为true的值。

使用render方法渲染需要显示的Switch控件

render: function() { return ( <View@H_301_37@ style@H_301_37@={styles.container}@H_301_37@>@H_301_37@ <SwitchAndroid @H_301_37@ onValueChange@H_301_37@={(value)@H_301_37@ =>@H_301_37@ this.setState({switchIsOn: value})} style=@H_301_37@{{marginBottom@H_301_37@: 10}}@H_301_37@ value={this.state.switchIsOn} /> </View@H_301_37@>@H_301_37@ );@H_301_37@

设定container样式

var styles = StyleSheet.create@H_301_37@({ container: { flex: 1@H_301_37@,flexDirection: 'column'@H_301_37@,justifyContent: 'center'@H_301_37@,alignItems: 'center'@H_301_37@,});@H_301_37@

这里，水平垂直居中显示。

自定义可设定初始值的Switch控件

下面我自己写了一个可以设定初始值的Switch控件，比较简单,先看下效果吧:

为属性值设定初始状态

getInitialState: function@H_301_37@()@H_301_37@ {@H_301_37@
    return@H_301_37@ {
      switchIsOn: true@H_301_37@,defaultTitle : "on"@H_301_37@
    };
  },

这里switchIsOn用来标志当前的Switch是否被选中，defaultTitle 用来显示当前的状态。

根据用户设定，动态改变初始值

componentDidMount: function@H_301_37@()@H_301_37@ {@H_301_37@
var@H_301_37@ defaultOn = this@H_301_37@.props.defaultOn;
this@H_301_37@.setState({switchIsOn: defaultOn});
this@H_301_37@.setState({defaultTitle: defaultOn ? "on"@H_301_37@:"off"@H_301_37@});
},

渲染需要显示的组件

render: function() { return ( <View@H_301_37@ style@H_301_37@={styles.mySwithStyle}@H_301_37@>@H_301_37@ <SwitchAndroid @H_301_37@ onValueChange@H_301_37@={(value)@H_301_37@ =>@H_301_37@ this.setState({switchIsOn: value},this.setState({defaultTitle: value ? "on":"off"}))} style=@H_301_37@{{marginBottom@H_301_37@: 10}}@H_301_37@ value={this.state.switchIsOn} /> <Text@H_301_37@ style@H_301_37@=@H_301_37@@H_301_37@{{color@H_301_37@: "red"@H_301_37@,fontSize@H_301_37@: 20}}@H_301_37@>@H_301_37@{this.state.defaultTitle}</Text@H_301_37@>@H_301_37@ </View@H_301_37@>@H_301_37@ ); },@H_301_37@

这里当点击Switch组件的时候，会回调onValueChange方法，因此在该方法中，根据当前的值，对其状态进行了改变。

使用MySwitch

var secondProject = React.createClass({
  render: function() {
    return (
      <View@H_301_37@ style@H_301_37@={styles.container}@H_301_37@>@H_301_37@
       <MySwitch@H_301_37@ defaultOn@H_301_37@={false}@H_301_37@/>@H_301_37@
       <MySwitch@H_301_37@ defaultOn@H_301_37@={true}@H_301_37@/>@H_301_37@
       <MySwitch@H_301_37@ defaultOn@H_301_37@={true}@H_301_37@/>@H_301_37@
   </View@H_301_37@>@H_301_37@
    );
  },});

这里，我为自定义的defaultOn分别设定不同的初始状态。此时运行就是上面的效果了，好了，贴上全部的代码：

'use strict'@H_301_37@;

var@H_301_37@ React = require@H_301_37@('react-native'@H_301_37@);
var@H_301_37@ ProgressBar = require@H_301_37@('ProgressBarAndroid'@H_301_37@);
var@H_301_37@ SwitchAndroid = require@H_301_37@('SwitchAndroid'@H_301_37@)
var@H_301_37@ TimerMixin = require@H_301_37@('react-timer-mixin'@H_301_37@); //@H_301_37@引入计时器模块
var@H_301_37@ {
  AppRegistry,} = React;

var@H_301_37@ MySwitch = React.createClass({
  getInitialState@H_301_37@: function@H_301_37@() {
    return@H_301_37@ {
      switchIsOn@H_301_37@: true@H_301_37@,componentDidMount@H_301_37@: function@H_301_37@() {
    var@H_301_37@ defaultOn = this@H_301_37@.props.defaultOn;
    this@H_301_37@.setState({switchIsOn@H_301_37@: defaultOn});
    this@H_301_37@.setState({defaultTitle@H_301_37@: defaultOn ? "on"@H_301_37@:"off"@H_301_37@});

  },render@H_301_37@: function@H_301_37@() {
    return@H_301_37@ (
      <View style={styles.mySwithStyle}>
        <SwitchAndroid
              onValueChange={(value)@H_301_37@ =>@H_301_37@ this@H_301_37@.setState({switchIsOn@H_301_37@: value},this@H_301_37@.setState({defaultTitle@H_301_37@: value ? "on"@H_301_37@:"off"@H_301_37@}))}
              style={{marginBottom@H_301_37@: 10@H_301_37@}}
              value={this@H_301_37@.state.switchIsOn} />
        <Text style={{color@H_301_37@: "red"@H_301_37@,fontSize@H_301_37@: 20@H_301_37@}}>{this@H_301_37@.state.defaultTitle}</Text>
      </View>
    );
  },});


var@H_301_37@ secondProject = React.createClass({
  render@H_301_37@: function@H_301_37@() {
    return@H_301_37@ (
      <View style={styles.container}>
       <MySwitch defaultOn={false@H_301_37@}/>
       <MySwitch defaultOn={true@H_301_37@}/>
       <MySwitch defaultOn={true@H_301_37@}/>

   </View>
    );
  },});

var@H_301_37@ styles = StyleSheet.create({
  container@H_301_37@: {
    flex@H_301_37@: 1@H_301_37@,flexDirection@H_301_37@: 'column'@H_301_37@,justifyContent@H_301_37@: 'center'@H_301_37@,alignItems@H_301_37@: 'center'@H_301_37@,mySwithStyle@H_301_37@: {
    flex@H_301_37@: 1@H_301_37@,flexDirection@H_301_37@: 'row'@H_301_37@,fontstyle@H_301_37@: {
    color@H_301_37@: "blue"@H_301_37@,fontSize@H_301_37@: 20@H_301_37@,textAlign@H_301_37@: "center"@H_301_37@,viewstyle@H_301_37@: {
    borderColor@H_301_37@: "red"@H_301_37@,borderWidth@H_301_37@: 1@H_301_37@,}
});

AppRegistry.registerComponent('secondProject'@H_301_37@,() => secondProject)@H_301_37@; @H_301_37@

ok，关于react-native组件学习，该篇就到这里了，未完待续。