react native 的引导页只启动一次
1.导入写的全局判断页面
import sessions from "../../util/storageUtil";
2. 正常写入两张图片并做样式处理:(这里有几张图片宽度就乘以几)
render(){ return ( <ScrollView contentContainerStyle={{ width: Dimensions.get('window').width*2, height: Dimensions.get('window').height}} bounces={false} pagingEnabled={true} showsHorizontalScrollIndicator={false} horizontal={true}> <Image style={start.backgroundImage} source={require('../../imgs/temporary/cover-1.jpg')} /> <Image style={start.backgroundImage} source={require('../../imgs/temporary/cover-2.jpg')}
<View style={{position:"absolute",width : Dimensions.get("window").width,height : Dimensions.get("window").height,zIndex : 9999,right : 0}}> <View style={{flex : 1}}></View> <View style={{flexDirection : "row",justifyContent : "center",height : Platform.OS === "ios" ? 170 : 140}}> <View style={{backgroundColor:"#000",borderWidth : 1,borderColor : "#fff",borderRadius : Platform.OS=="ios" ? 40: 50,width : 150,height : 40,overflow:"hidden"}} > <Text style={{fontSize:18,color:"#fff",marginLeft:17,marginTop:Platform.OS === "ios" ? 8 : 5}} onPress={()=>{this.goHome();}}>开启APP</Text> </View> </View> </View></ScrollView> );}
3.样式代码:
var start = StyleSheet.create({ backgroundImage: { width: Dimensions.get('window').width, height: Dimensions.get('window').height, } });
4.设置判断,每一次打开app判断下是否有isOpen是否为空,如果有就不显示引导页,如果没有就显示引导页。当第一次打开之后的每一次设置isOpen的内容是“true”。
async componentWillMount(){ // 检测是否为第一次打开 await sessions.getItems("isOpen").then((value) => { if(value == null || value == "" || value == undefined){ return true; }else{ this.goHome(); } }).catch((err) =>{ }); } goHome(){ // 重置路由 const resetAction = StackActions.reset({ index: 0, actions: [ NavigationActions.navigate({routeName: 'TabRoot'}) ] }); this.props.navigation.dispatch(resetAction); // 设置第一次打开标识 sessions.setItems("isOpen",true); }5.看一次全局保存和获取还有删除:
6. 这样就可以了!