将字符串传递给navigation.navigation

Question

我正在尝试设置一个菜单，并试图将路径传递给navigation.navigation作为navigation.anavigation(menu.path(，但它不允许我以这种方式传递路线。

所以我在这里创建项目，路径为selections.name

export default function Menu_1({ navigation }) {
const [selections, setSelections] = useState([
{ title: 'Normas de utilización de la App', key:'1' , name:'Normas'},
{ title: 'Zonas maritimas', key:'2'}
]) 

当我试图将该路径传递给navigation.navigation时，除非我使用navigation.navigate("Normals"(，否则它不允许我使用

return (
<View style={globalStyles.container}>
<FlatList
data={selections}
renderItem={({ item })=>(
<TouchableOpacity onPress={() => navigation.navigate()}>
<Card>
<Image
style={{ 
width: 100, 
height: 50,
}} 
source={images.images_menu[item.key]} />
<Text style={globalStyles.titleCard}> {item.title} </Text>
</Card>
</TouchableOpacity>

)}
/>
</View>     
)   
}

有没有办法将字符串从selections.name传递到navigation.navigation？

Answer 1

如果我理解正确，您可以访问renderItem道具的item参数中的selections.name，如下所示：

return (
<View style={globalStyles.container}>
<FlatList
data={selections}
renderItem={({ item })=>(
<TouchableOpacity onPress={() => navigation.navigate(item.name)}> // item.name
<Card>
<Image
style={{ 
width: 100, 
height: 50,
}} 
source={images.images_menu[item.key]} />
<Text style={globalStyles.titleCard}> {item.title} </Text>
</Card>
</TouchableOpacity>

)}
/>
</View>     
)

您也可以将其切换到任何您想要的navigate(item.key)、navigate(item.foo)。只需确保您保留此处的值

const [selections, setSelections] = useState([
{ title: 'Normas de utilización de la App', key:'1' , name:'Normas'},
{ title: 'Zonas maritimas', key:'2', name: 'Foo'} // missing name
])