使用来自 onPress 函数的传递值反应原生显示另一个组件视图答案

【问题标题】：React native using the passing value from onPress function show another component view使用来自 onPress 函数的传递值反应原生显示另一个组件视图
【发布时间】：2022-07-15 22:39:57
【问题描述】：

想要使用 react native 中的 onPress 函数传递的参数值来更新组件视图。

【问题讨论】：

您当前的代码是什么样的，什么不起作用？

标签： reactjs react-native

【解决方案1】：

    const onItemClick = (item) => {
      alert(JSON.stringify(data));          
     }
    
      const renderItem = ({ index, item }) => (
    
        <TouchableOpacity onPress={ () => {onItemClick(item)} } >
            <Text> {item.name} </Text>
        </TouchableOpacity>
       );

【讨论】：

onPress={ () => {onItemClick(item)} 使用 this 将数据传递给钩子中 FlatList 中的 onPress

【解决方案2】：

如果您希望通过传递给 onPress 函数的值来更新组件，则需要确保将要更新的内容存储在 state 变量中，以便 React Native 触发该组件的更新。它可能看起来像这样：

const [counter, setCounter] = useState(0);

const textOnPress = (const val) => {
    setCounter(val);
}

const component = () => (
    <Text onPress={()=>{textOnPress(const val)}}>{counter}</Text>
);

【讨论】：

我有来自 Api 调用的数组数据，并且该主数据中有另一个包含许多对象的数组，我使用平面列表显示主数组对象，现在想在按下平面列表组件时更改值并显示另一个组件以显示其内部内容，请帮助，在此先感谢
您必须将组件传递到FlatList，而不是使用View 来包装组件，您必须使用Pressable。 Pressables 有一个 onPress 事件，您可以向该事件传递一个函数来更改用于存储该项目内容的 state 变量。
创建一个带有条件渲染的组件，在你的平面列表中返回它。当用户按下组件时，有条件地更改您正在渲染的项目的布尔值，以便它们出现。这将允许您最初不显示任何主要内容，然后在按下后显示内部内容。