將 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

基本上，確保在渲染組件時始終傳遞所有預期的道具，並且一切順利！