0
こんにちは私は反応ネイティブで新しく、現在AsyncStorageについて学んでいます。ナビゲーターとAsyncStorageはネイティブに反応します
ナビゲータをレンダリングするために条件付きを実装したいと考えています。 AsyncStorageに値キーがある場合、初期ルートはPage2に行き、AsyncStorageに値キーがない場合、初期ルートはPage1に移動します。
アプリを閉じてもう一度開くと、キーがあるかどうかに対応するページが表示されます。助けてください。
ここに私はこれまで何をやったかです：
import React, { Component } from 'react';
import {
AppRegistry,
TextInput,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity,
AsyncStorage,
} from 'react-native';
var initialRoute = {id: 1}
var STORAGE_KEY = '@AsyncStorageExample:key';
var SCREEN_WIDTH = require('Dimensions').get('window').width;
var BaseConfig = Navigator.SceneConfigs.FloatFromRight;
var CustomLeftToRightGesture = Object.assign({}, BaseConfig.gestures.pop, {
snapVelocity: 8,
edgeHitWidth: SCREEN_WIDTH,
});
var CustomSceneConfig = Object.assign({}, BaseConfig, {
springTension: 100,
springFriction: 1,
gestures: {
pop: CustomLeftToRightGesture,
}
});
var Page1 = React.createClass({
_goToPage2() {
AsyncStorage.setItem(STORAGE_KEY, "this is the key");
this.props.navigator.push({id: 2})
},
render() {
return (
<View style={[styles.container, {backgroundColor: 'white'}]}>
<Text style={styles.welcome}>
This is Page 1
</Text>
<TouchableOpacity onPress={this._goToPage2}>
<View style={{paddingVertical: 2, paddingHorizontal: 7, backgroundColor: 'black'}}>
<Text style={styles.buttonText}>Save Key</Text>
</View>
</TouchableOpacity>
</View>
)
},
});
var Page2 = React.createClass({
componentDidMount() {
this._loadInitialState();
},
async _loadInitialState() {
try {
var value = await AsyncStorage.getItem(STORAGE_KEY);
if (value !== null){
this.setState({selectedValue: value})
} else {
}
} catch (error) {
}
},
getInitialState() {
return {
selectedValue: null
};
},
_signOutPressed(){
AsyncStorage.removeItem(STORAGE_KEY);
this.props.navigator.push({id: 1})
},
render() {
if(this.state.selectedValue === null) {
begin = <Page1 />
} else{
begin = <View style={[styles.container, {backgroundColor: 'white'}]}>
<Text style={styles.welcome}>This is Page 2</Text>
<Text>KEY: {this.state.selectedValue}</Text>
<TouchableOpacity onPress={this._signOutPressed}>
<View style={{paddingVertical: 2, paddingHorizontal: 7, margin: 10, backgroundColor: 'black'}}>
<Text style={styles.buttonText}>Delete Key</Text>
</View>
</TouchableOpacity>
</View>
}
return (
begin
);
},
});
var TestAsync = React.createClass({
_renderScene(route, navigator) {
if (route.id === 1) {
return <Page1 navigator={navigator} />
} else if (route.id === 2) {
return <Page2 navigator={navigator} />
}
},
_renderScene1(route, navigator) {
if (route.id === 1) {
return <Page1 navigator={navigator} />
} else if (route.id === 2) {
return <Page2 navigator={navigator} />
}
},
_configureScene(route) {
return CustomSceneConfig;
},
render() {
var initialRoute = {id:1}
if(AsyncStorage.getItem(STORAGE_KEY) != null){
initialRoute = {id:2}
}
return(
<Navigator
initialRoute={initialRoute}
renderScene={this._renderScene}
configureScene={this._configureScene} />
);
}
});
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: 'black',
},
buttonText: {
fontSize: 14,
textAlign: 'center',
margin: 10,
color: 'white',
},
default: {
height: 26,
borderWidth: 0.5,
fontSize: 13,
padding: 4,
marginHorizontal:30,
marginBottom:10,
},
});
module.exports = TestAsync;
が解決ナビゲーターの参照を渡す必要があるメソッドをレンダリング！ありがとう非常に@ abhishek – sptra
ああ待って、Page1私は 'キーを保存する'ボタンをクリックするとエラーが表示されます "未定義のプッシュ'プロパティを読み取ることはできません。任意のソリューションですか？ – sptra
おそらく、ナビゲータの参照が小道具に設定されていない可能性があります。コードを更新できますか？ – Abhishek