Javascript 构建简介,阅读应用程序本地设置

Javascript 构建简介,阅读应用程序本地设置,javascript,react-native,redux,Javascript,React Native,Redux,我对react native完全是新手,正在尝试构建我的第一个应用程序 问题是,我想为应用程序做介绍,我已经决定使用react原生应用程序介绍。一旦用户通过应用程序介绍,我将在Redux存储中将firstRun状态更改为false。对于设备的持久保存设置,我使用redux persist 我只是不明白下次我怎么能跳过简介。对于导航,我使用react导航。我已经对开场白做了陈述 // Intro ... render(){ if (this.props.settings.firstRun ===

我对react native完全是新手,正在尝试构建我的第一个应用程序

问题是,我想为应用程序做介绍,我已经决定使用react原生应用程序介绍。一旦用户通过应用程序介绍,我将在Redux存储中将firstRun状态更改为false。对于设备的持久保存设置,我使用redux persist

我只是不明白下次我怎么能跳过简介。对于导航,我使用react导航。我已经对开场白做了陈述

// Intro
...
render(){
if (this.props.settings.firstRun === false){
   this.props.navigation.navigate('Home');
}
...
这是可行的,但有更好的方法来做到这一点。由于redux商店初始化应用程序将始终获取我的首次运行初始设置:true

// my settings reducer   
export default function(state = settingsInitState, action) {
switch(action.type){
    case 'SETTINGS_CHANGE':
        state.firstRun = action.payload.value;
        return state;
        break;
}
return state;
}

const settingsInitState = {
        firstRun: true,
};
// actions
export const changeSettings = (settings) => {
return {
    type: settings.type,
    payload: settings
}
}
我是否应该跳过reducer设置初始化中的@redux/INIT和@redux/PROBE状态


有人可以举一些例子来说明如何处理应用程序的介绍。

不确定re:redux是否持续,但您可以在“启动场景”(基本上只是一个带有背景色和/或徽标图像的空视图)中执行此操作,作为您的第一个活动,并使用AsyncStorage作为:

import {AsyncStorage, ...} from 'react-native'
const KEY_SeenStart = 'seenStartKey';

class SplashScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: 'splash screen',
            seenStart: 'false',
        };
    }

componentDidMount() {
 AsyncStorage.getItem(KEY_SeenStart).then((seenIntro) => {
    if (seenIntro !== null) {  //has already seen app intro
        this.setState({seenStart: seenIntro});//use this to direct one way or another...
    }else{    //hasn't seen app intro...
        this.setState({seenStart: 'false'});
        try {
            AsyncStorage.setItem(KEY_SeenStart, 'true');//has seen it now, set 'true'
        } catch (error) {
            window.alert('AsyncStorage error: ' + error.message);
        }
    }
});

var whereToGo = (this.state.seenStart == 'true')?'first scene':'app intro';
        this.props.navigator.replace({
            id: whereToGo,
            passProps: {
                ...
                }
        });
  }
...
}

splash场景也是进行任何网络连接的好地方,然后您可以将结果作为道具传递给您的“第一个”活动。希望这有帮助

不确定re:redux是否持续,但您可以在“启动场景”(基本上只是一个带有背景色和/或徽标图像的空视图)中执行此操作,并将异步存储用作:

import {AsyncStorage, ...} from 'react-native'
const KEY_SeenStart = 'seenStartKey';

class SplashScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: 'splash screen',
            seenStart: 'false',
        };
    }

componentDidMount() {
 AsyncStorage.getItem(KEY_SeenStart).then((seenIntro) => {
    if (seenIntro !== null) {  //has already seen app intro
        this.setState({seenStart: seenIntro});//use this to direct one way or another...
    }else{    //hasn't seen app intro...
        this.setState({seenStart: 'false'});
        try {
            AsyncStorage.setItem(KEY_SeenStart, 'true');//has seen it now, set 'true'
        } catch (error) {
            window.alert('AsyncStorage error: ' + error.message);
        }
    }
});

var whereToGo = (this.state.seenStart == 'true')?'first scene':'app intro';
        this.props.navigator.replace({
            id: whereToGo,
            passProps: {
                ...
                }
        });
  }
...
}
splash场景也是进行任何网络连接的好地方,然后您可以将结果作为道具传递给您的“第一个”活动。希望这有帮助