RN学习-引导页

Guide.js

/**
 * @providesModule Guide
 */
import React, {Component} from 'react'

// 2.导入常用组件,注册组件,样式组件,View组件,Text组件
import
{
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image

}from 'react-native'

import Swiper from 'react-native-swiper';

import Common from 'Common'

import CommonHighButton from 'CommonHighButton'

import Main from 'Main'


// 3.自定义 程序入口组件([[UIView alloc] init])
// Swiper:使用注意点,不需要设置样式,否则显示不了
export default class Guide extends Component {

    render(){
        return (

            <Swiper loop={false}
                    activeDotColor="black"
            >
                <Image source={{uri:'slider1'}} style={{width:Common.screenW,height:Common.screenH}}/>
                <View style={{alignItems:'center'}}>
                    <Image source={{uri:'slider2'}} style={{width:Common.screenW,height:Common.screenH}}/>
                    <CommonHighButton title='立即体验'
                                      buttonStyle={styles.buttonStyle}
                                      titleStyle={{color:'red',fontSize:17}}
                                      onPress={()=>{
                                          // 自动把navigator传递给下一个组件
                                          this.props.navigator.replace({
                                              component:Main
                                          })
                                      }}
                    />
                </View>


            </Swiper>
        )

    }

}
// 4.样式表 组件外观 尺寸,颜色
var styles = StyleSheet.create({
    viewStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    },
    buttonStyle:{
        position:'absolute',
        bottom:60,
        width:150,
        height:40,
        borderWidth:1,
        borderColor:'red',
        borderRadius:6
    }
})

知识点

• 轮播图第三方组件-react-native-swiper

安装:npm install react-native-swiper --save

• 加载本地图片
  <Image source={{uri:'slider1'}}
• 自定义可以设置高亮效果的按钮CommonHighButton.js

/**
 * @providesModule CommonHighButton

 */
import React, {Component,PropTypes} from 'react'

// 2.导入常用组件,注册组件,样式组件,View组件,Text组件
import
{
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    Platform,
    TouchableOpacity,
    Image,
}from 'react-native'

var screenW = Dimensions.get('window').width;


// 3.自定义 程序入口组件([[UIView alloc] init])
export default class CommonHighButton extends Component {

    static propTypes = {
        // 正常
        // 标题
        title:PropTypes.string,

        // 图片
        image:PropTypes.string,

        // 样式
        imageStyle:PropTypes.oneOfType([PropTypes.object,PropTypes.number]),
        titleStyle:PropTypes.oneOfType([PropTypes.object,PropTypes.number]),
        buttonStyle:PropTypes.oneOfType([PropTypes.object,PropTypes.number]),
        highlightedTitleStyle:PropTypes.oneOfType([PropTypes.object,PropTypes.number]),

        // 高亮
        highlightedImage:PropTypes.string,

        // 监听事件
        onPress:PropTypes.func
    };

    constructor(props){
        super(props);

        this.state = {
            highlighted:false
        }
    }

    render(){
        return (
            <TouchableOpacity style={[styles.buttonStyle,this.props.buttonStyle]}
                              onPressIn={()=>{
                                  this.setState({
                                      highlighted:true
                                  })
                                  if (this.props.onPress){
                                      this.props.onPress(this);
                                  }
                              }}
                              onPressOut={()=>{
                                  this.setState({
                                      highlighted:false
                                  })
                              }}
                              activeOpacity={this.props.highlightedImage?1:0.5}
            >

                {/*标题*/}
                {this.props.title?<Text style={this.state.highlighted && this.props.highlightedTitleStyle?this.props.highlightedTitleStyle:this.props.titleStyle}>{this.props.title}</Text>:null}

                {/*图片*/}
                {this.props.image?<Image source={{uri:this.state.highlighted && this.props.highlightedImage?this.props.highlightedImage : this.props.image}} style={[{marginLeft:3},this.props.imageStyle]}/>:null}

            </TouchableOpacity>
        )
    }
}

// 4.样式表 组件外观 尺寸,颜色
var styles = StyleSheet.create({
    buttonStyle:{
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center'
    }
});

知识点

• State

如果以后想修改某个属性，就需要用state
定义属性

this.state = {
            highlighted:false
 }

修改属性

this.setState({
        highlighted:true
}

• PropTypes

在自定义组件的时候，通常需要暴露属性出去，并且设置属性类型，外界在使用自定义属性的时候，就自动有提示属性功能
注意：PropTypes必须要用static声明，否则无效果。

• TouchableOpacity 点击事件

http://reactnative.cn/docs/0.31/touchableopacity.html

• @providesModule，用于头文件的便捷导入，省略路径

用于该文件的最上面，第一行注释形式

// 以前
// import CommonHighButton from './../Button/CommonHighButton'

// 现在可以直接用类名
import CommonHighButton from 'CommonHighButton'