从 App 内的函数调用重新加载 React Native App

Question

我正在使用 AsyncStorage 将大学信息存储在 React Native 应用程序中。我正在为我的页面使用带有屏幕的堆栈和选项卡导航器。一旦有人选择了不同的大学，所有页面内容都会成功地以我想要的方式重新呈现。标题没有。我无法告诉它 AsyncStorage 变量已更新并更新状态并重新呈现自身。

一旦有人选择一所新大学，我想简单地刷新整个应用程序。然后变量、状态和道具都将是最新的，即与调出开发菜单并重新加载应用程序相同。我想要在应用程序中调用一个函数并在内部执行此操作的按钮。

编辑：这是我的设置页面中代码的 sn-p。当按下提交按钮时，我需要我的 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>
);
  }
 }

Answer 1

使用AsyncStorage 确实是个坏主意，一旦你的代码变得更大，它就会产生问题，但你可以通过使用 setTimeout 到 AsyncStorage 来处理这个问题。

AsyncStorage.setItem('title', JSON.stringify(responseJson.data.title));
                                _this.setState({getTitle: true});
                            }, 3000)

上面的例子我展示了如果你只想更新同一页面的值，你如何使用超时来异步存储。

如果你想将 AsyncStorage 更新到其他组件（页面），你可以使用广播方法：

DeviceEventEmitter.emit('changeTitle', responseJson, null);

将上述代码行放在您要更新 AsyncStorage 的位置。现在要在其他页面上获取它，或者在项目中的任何地方说，只需将下面的代码放在 componentDidMount 中：

componentDidMount() {
        this.emitter = DeviceEventEmitter.addListener('changeToolBarTitle', this.changeToolBarTitle, null);
    }

不要忘记在这两个文件中导入 DeviceEventEmitter

import {
    DeviceEventEmitter
} from 'react-native';

我希望你得到你的解决方案。

Answer 2

有点不清楚为什么要重新加载整个应用程序只是为了从不同的屏幕访问适当的数据。发布您的代码的简化版本可能会很有用，这样您的意图就有点清楚了。

我假设这是因为您没有状态容器来管理您的应用程序状态？

所以，这里有几件事可以尝试

• Redux

Redux 将管理应用程序状态。这样您就可以从任何屏幕基本上“setState”并从任何屏幕访问该状态（简化，但基本上就是这样）

• 新的Contextapi

与 Redux 基本相同，但没有很多样板。在进入 Redux 之前，这将是一个很好的起点。看看Using React Context API video如何使用它

最后，您不需要（不应该）“在有人选择新大学后刷新整个应用程序”。这将是一种矫枉过正且高度未优化（更不用说不必要）的做事方式。此外，随着您的应用程序变得更大（不平凡），这种方法根本无法扩展。

首先从Context（学习曲线较少）开始，如果您想走得更远，请尝试第二个Redux（学习曲线陡峭）

希望这会有所帮助。