react-native - 如何使用 redux 和 reactnative 将下拉列表的选定值传递给独立的组件？

Question

这是我的第一个组件包含一个下拉列表

***** SelectDropDown.js ***********

export default function SelectDropDown() {
  const [val, setVal] = useState(null);
  data=["option1","option2","option3","option4",]

  const handleSelect = (e) => {
    console.log(data[e]);
    setVal(e);
  };

  return (
    <View style={styles.container}>
      <ModalDropdown
        options={data}
        multipleSelect={false}
        defaultValue="Selectionner OF"
        style={styles.DropDown}
        onSelect={handleSelect}
      />
    </View>
  );
}

---

我想将下拉列表的选定值传递给 Screen1 (ButtonsGroupe,Detaille) 和 screen2

Screen1.js **********

export default function Screen1() {
  return (
    <>
      <SelectDropDown />
      <ButtonsGroupe />
      <Detaille />
      
    </>
  );
}

Screen2.js **********

export default function Screen2() {
  return (
    <>
       <ButtonsProd />
       <Production />
       <DataProd />
       <Details />      
    </>
  );
}

---

我将 Screen1 和 Screen 2 放在 StackNavigator 中以在它们之间导航

导航.js *******

export default function Nav() {
  const Stack = createStackNavigator();
  return (
    <>
      <Stack.Navigator initialRouteName="Screen1" screenOptions={{headerShown: false}}>
          <Stack.Screen name="Screen1" component={Screen1}/>
          <Stack.Screen name="Screen2" component={Screen2}/>
      </Stack.Navigator>
    </>
  );
}

---

最后我被称为 app.js 的那些组件

** app.js

export default function App() {
 
  return (
    <>
      <NavigationContainer>
        <StatusBar animated={true} hidden={true} />
          <HeaderBarNavigation />
          <Nav />
      </NavigationContainer>
    </>
  );
}

请有人可以帮我解决这个任务

标签： react-nativereact-redux

Answer 1

我对您想要做的事情的理解是您试图在不相关的屏幕之间传递一些数据（无论是孩子还是父母）。

由于您使用的是 react-navigation，因此您可以在调用屏幕时传递参数。

我会建议这样的事情：

    export default function SelectDropDown({navigation}) {
      const [val, setVal] = useState(null);
      data=["option1","option2","option3","option4",]
    
      const handleSelect = (e) => {
        console.log(data[e]);
        setVal(e);
      };

  useEffect(() => {
    if(val){
      navigation.navigate('Screen1', {superCoolParam : val})
    }
  }, [val]);
    
      return (
        <View style={styles.container}>
          <ModalDropdown
            options={data}
            multipleSelect={false}
            defaultValue="Selectionner OF"
            style={styles.DropDown}
            onSelect={handleSelect}
          />
        </View>
      );
    }

接着 ：

export default function Screen1({route}) {

  useEffect(() => {
  console.log('Catching params => ', route.params.superCoolParams)
  }, [route]);

  return (
    <>
      <SelectOF />
      <ButtonsGroupe />
      <Detaille />
      
    </>
  );
}