Select 下拉列表中的一個項目，並在 React native 的另一個組件中使用該值

Question

我只是想做這樣的事情（當用戶 select 一個項目，然后導航到另一個組件）：

     const handleValueChange=(itemValue, itemIndex) =>setTypeValue(itemValue)
    
       const onPress = () => {
    
            try{
              
              const topic = "Plant/type";
              ...
              navigation.navigate('Air')
             
            }catch(err){
              console.log(err)
            }  
            
          }
   return (
         <Picker
                  selectedValue={typeValue}
                  onValueChange={handleValueChange}
                  style={{ top: '21%', height: 50, width: 150 }}/> 

       <TouchableOpacity
                          style={styles.button}
                          onPress={()=> onPress()}
                        />
)

通常，當我們想在兩個組件之間傳遞值時，我們會使用 props：

<AirScreen typeofPlant={typeValue} />

但在這種情況下，我不知道如何在不調用 AirScreen 的情況下做到這一點

Answer 1

只需執行以下操作：

navigation.navigate('RouteName', { /* params go here */ })

您可能需要閱讀以下文檔： https://reactnavigation.org/docs/params/

Answer 2

你可以這樣做：

const onPress = () => {
    try{
        const topic = "Plant/type";
        ...
        navigation.navigate('Air', {newTopic: topic}) //you can pass another value by separating with comma
    }catch(err){
        console.log(err)
    }     
}

然后您可以在下一個屏幕中獲取相同的值，例如：

function NextScreen({ route, navigation }) {
    const topic = route.params.newTopic
}

希望這對你有用。