将 state 传递给父母，然后传递给孩子

Question

我有 app.js，它将值分配给 state。 然后我试图将 state 传递给呈现 Screen1 的主屏幕。 我在 Screen1 中需要这个 state。

您可以看到我正在尝试在 Screen1 上显示用户的纬度和经度，但我无法渲染任何内容。

我已经列出了下面的代码以及这里的小吃演示。 目标是 state 到 go 从 App.js -> Home.js -> Screen1.js

编辑:: 我可能会使用 React 本机上下文，但以前从未使用过。 如果我目前的做法被认为是一种糟糕的做法，那么上下文就是 go 的方式。

主页.js

export default function Home({ navigation, latitude, longitude }) {

  return (
    <View style={styles.container}>
        <Screen1 />
    </View>
  );
}

Screen1.js

export default class Screen1 extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>latitude:</Text>
        <Text style={styles.paragraph}>{this.props.latitude}</Text>
        <Text style={styles.paragraph}>longitude:</Text>
        <Text style={styles.paragraph}>{this.props.longitude}</Text>
      </View>
    );
  }
}

export default function MyTabs() {
  const [latitude, setLatitude] = useState(null);
  const [longitude, setLongitude] = useState(null);
  
 const permissionAlert = () => {
    Alert.alert(
      'You did not allow location permissions',
      'Please go to settings and allow location permissions for full functionality',
      [
      ],
      { 
        cancelable: true 
      }
    );
  }

  useEffect(() => {
    (async () => {
      
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        permissionAlert();
        return;
      }

      let location = await Location.getCurrentPositionAsync({});
      setLatitude(location.coords.latitude)
      setLongitude(location.coords.longitude);
    })();
  }, []);

  console.warn("latitude: ", latitude);
  console.warn("longitude: ", longitude);
  
  return (
<NavigationContainer>
    <Stack.Navigator
     initialRouteName="Home">        
      <Stack.Screen name="Home" options={{headerShown: false}}>
        {(props) => <Home {...props} latitude={latitude} longitude={longitude} />}
      </Stack.Screen>
      <Stack.Screen name="Screen1" options={{headerShown: false}}>
        {(props) => <Screen1  {...props} latitude={latitude} longitude={longitude} />}
      </Stack.Screen>
    </Stack.Navigator>
    </NavigationContainer>
);
}

Answer 1

您需要从MyTabs -> Home -> Screen1传递latitude / longitude 。 目前，您将它们设置在Home上，而不是Screen1上。 要修复，请将道具添加到Home.js中的<Screen1 />

export default function Home({ navigation, latitude, longitude }) {

  return (
    <View style={styles.container}>
        <Screen1 latitude={latitude} longitude={longitude} />
    </View>
  );
}

还值得注意的是，您同时渲染Screen1

• 直接在MyTabs
• 间接在MyTabs中，当您渲染Home

基本上，确保在渲染组件时始终传递所有预期的道具，并且一切顺利！