在组件外部反应本机更新视图

Question

我正在尝试通过事件侦听器的本机更新我的渲染/视图。侦听器必须严格位于视图或组件之外，是否可以直接使用状态/ setstate更新更新渲染/视图。现在，它正在使用react挂钩进行更新，并且位于组件内部。

                         const App: () => React$Node = () => {                            
                          const [position, setposition] = useState({ 
                              lat: null,
                              lng: null,
                              foreground: false,
                              speed: null,
                              accuracy: null
                          });

                          useEffect(() => {    
                              Mylocationlistener.on('location', (result) => {
                                setposition({
                                  lat: result.location.latitude,
                                  lng: result.location.longitude,
                                  foreground: result.user.foreground,
                                  speed: result.location.speed,
                                  accuracy:result.location.accuracy
                                })
                                console.log('location listener:', stringify(result));
                              });
                              }, []);

                          return (
                            <>
                              <StatusBar barStyle="dark-content" />
                              <SafeAreaView>
                                <ScrollView
                                  contentInsetAdjustmentBehavior="automatic"
                                  style={styles.scrollView}>
                                   <View style={styles.sectionContainer}>
                                      <Text style={styles.sectionTitle}>My App{"\n"}</Text>
                                      <Text style={styles.sectionTitle}>Location Tracker</Text>
                                    </View>
                                  {global.HermesInternal == null ? null : (
                                    <View style={styles.engine}>
                                      <Text style={styles.footer}></Text>
                                    </View>
                                  )}
                                  <View style={styles.body}>
                                    <View style={styles.sectionContainer}>
                                      <Text style={styles.sectionTitle}>Latitude: {position.lat}</Text>
                                    </View>
                                    <View style={styles.sectionContainer}>
                                      <Text style={styles.sectionTitle}>Longitude: {position.lng}</Text>
                                    </View>
                                    <View style={styles.sectionContainer}>
                                      <Text style={styles.sectionTitle}>Speed: {position.speed}</Text>
                                    </View>
                                    <View style={styles.sectionContainer}>
                                      <Text style={styles.sectionTitle}>Accuracy: {position.accuracy}</Text>
                                    </View>
                                  </View>
                                </ScrollView>
                              </SafeAreaView>
                            </>
                          );
                        };