Question

我是反应原生的全新人，并试图构建我的第一个应用程序。

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

我只是不知道下次如何跳过介绍。对于导航我正在使用react-navigation。我已将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
}
}

我应该在减速器设置初始化中以某种方式跳过@@ redux / INIT和@@ redux / PROBE状态。

有人可以指出一些如何处理应用程序介绍的例子。

Answer 1

不确定re：redux-persist，但你可以在一个“飞溅场景”中做到这一点 - 基本上只是一个带有背景颜色和/或徽标图像的空视图 - 作为你的第一个活动，并使用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: {
                ...
                }
        });
  }
...
}

启动场景也是进行任何网络连接的好地方，然后您可以将结果作为道具传递给您的第一个＆＃39;活动。希望这有帮助！

构建介绍，阅读应用程序本地设置

1 个答案: