Я использую AsyncStorage для хранения информации об университете в приложении React Native. Я использую навигаторы стека и вкладок с экранами для своих страниц. Все содержимое страницы успешно перерисовывается так, как я хочу, когда кто-то выбирает другой университет. В заголовке нет. У меня нет способа сообщить ему, что переменная AsyncStorage была обновлена, а также обновить состояние и повторно отобразить себя.
Я хотел бы просто обновить все приложение, как только кто-то выберет новый университет. Тогда переменная, состояния и реквизиты будут обновлены, т. е. то же самое, что вызвать меню Dev и перезагрузить приложение. Мне нужна кнопка в приложении, которая вызывает функцию и делает это внутри.
РЕДАКТИРОВАТЬ: Вот фрагмент кода с моей страницы настроек. Мне нужно, чтобы поле «имя» моей переменной AsyncStorage изменялось в моем заголовке моего индексного файла при нажатии кнопки «Отправить».
saveMSU() {
const object = {
name: 'MONTANA STATE UNIVERSITY',
site: 'http://msubobcats.com/index.aspx',
};
AsyncStorage.setItem('schoolObj', JSON.stringify(object));
}
saveUM() {
const object = {
name: 'UNIVERSITY OF MONTANA',
site: 'http://gogriz.com/',
};
AsyncStorage.setItem('schoolObj', JSON.stringify(object));
}
updateSchool = async () => {
this.props.navigation.dispatch(NavigationActions.reset({
index: 0,
key: null,
actions: [NavigationActions.navigate({ routeName: 'Tabs' })]
}));
}
render() {
return (
<View style={styles.container}>
<Text>CHOOSE YOUR UNIVERSITY</Text>
<TouchableOpacity onPress={this.saveMSU}>
<Text>Montana State University</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.saveUM}>
<Text>University of Montana</Text>
</TouchableOpacity>
<Button onPress={this.updateSchool}>
SUBMIT
</Button>
</View>
);
}
}
Это основная часть моего индексного файла. Когда в настройках нажимается «Отправить», мне нужно обновить this.state.school.site и this.state.school.name. Мне нравится идея использования deviceEventEmitter, но я немного не понимаю, как это реализовать.
class App extends Component {
state = { school: Object, loaded: false };
componentWillMount() {
this.retrieveItem('schoolObj').then((current) => {
this.setState({ school: current, loaded: true });
}).catch((error) => {
console.log('Unable to retrieve data: ' + error);
});
}
async retrieveItem(key) {
try {
const schoolItem = await AsyncStorage.getItem(key);
const item = JSON.parse(schoolItem);
return item;
} catch (error) {
console.log(error.message);
}
return;
}
render() {
return (
<View style={{ flex: 1 }}>
<Image style={styles.logoStyle} source={require('./media/UAT.png')} />
{ this.state.loaded &&
<TouchableOpacity onPress={() => Linking.openURL(this.state.school.site)}>
<Text style={styles.headingStyle}>
{Object.values(this.state.school.name)}
</Text>
</TouchableOpacity>
}
<Root screenProps={this.state.school} />
</View>
);
}
}
