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