react-native引导画面组件

react-native

• 依赖组件
• 制作步骤
• 适用场景
• 场景演示

---

依赖组件

rn-viewpager（ios & android）
react-native-material-design（android）

制作步骤

import {IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'rn-viewpager';//引入必要依赖组件，其余组件自行引入


 <View style={styles.container}> //必须flex:1 
            <View style={styles.buttontop}> //自定义右侧头部按钮
                 <TouchableOpacity style={{padding:10}}>
                    <Text style={{color:'#ffffff',fontSize:15}}>跳过</Text>
                 </TouchableOpacity>
            </View>
             <IndicatorViewPager
                    style={{flex:1}}//必须
                    indicator={this._renderDotIndicator()}//自定义底部分页器
                >
                    <View>
                    <Image source={{uri: IMGS[0]}} style={styles.page} /> 
                    </View>
                     <View>
                        <Image source={{uri: IMGS[1]}} style={styles.page} /> 
                        <View style={styles.button}>
                        <Button  text="开启应用" theme={'dark'}  raised={true} onPress={()=> console.log("I pressed a raised button")} />
                        </View>
                     </View>
            </IndicatorViewPager>      

      </View>
      //自定义分页器方法
      _renderDotIndicator(){
        return <PagerDotIndicator pageCount={imgcount} />;
    }
    //样式
    var styles = StyleSheet.create({
      container: {
        flex: 1,
      },
       page: {
        flex: 1,
        width:deviceWidth,
        height:deviceHeight
      },
      button: {
        width:200,
        position:'absolute',
        bottom:30,
        left:btnWidth
      },
      buttontop:{
        position:'absolute',
        top:-1,
        right:-1,
        zIndex:255
      }
    });

适用场景

用户首次登录App应用，引导用户App使用方法

场景演示（效果演示）