javascript - 构建介绍，阅读App本地设置

Question

我对react-native完全陌生，正在尝试构建我的第一个应用程序。

问题是我想为应用程序制作介绍，并且我决定使用react-native-app-intro。一旦用户通过了应用程序介绍，我将在 Redux 存储中将firstRun 状态更改为 false。为了将设置持久保存到设备，我使用 redux-persist。

我只是不明白下次如何跳过介绍。对于导航，我使用 react 导航。我已经对介绍场景做了 if 语句

// Intro
...
render(){
if (this.props.settings.firstRun === false){
   this.props.navigation.navigate('Home');
}
...

这可行，但是有更好的方法吗？由于 redux 存储初始化应用程序将始终获得我的firstRun初始设置: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状态吗？

有人可以举例说明如何处理应用程序的介绍吗？

Answer 1

不确定回复:redux-persist，但您可以在“启动场景”中执行此操作(基本上只是一个带有背景颜色和/或 Logo 图像的空 View )作为您的第一个事件，并使用 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: {
                ...
                }
        });
  }
...
}

启动场景也是进行任何网络连接的好地方，然后您可以将结果作为 Prop 传递给您的“第一个”事件。希望这有帮助!