将字符串传递给 navigation.navigate

Question

我正在尝试设置一个菜单，我正在尝试将路径传递给 navigation.navigate 作为 navigation.navigate(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.navigate 时，它不允许我使用，除非我使用 Navigation.navigate('Normas')

     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.navigate？

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
      ])

将字符串传递给 navigation.navigate

Passing a string to navigation.navigate

navigation

reactjs

react-native