在 React Native 中渲染组件 onPress(TouchableOpacity/Button)

Posted 2023-03-16

【中文标题】在 React Native 中渲染组件 onPress(TouchableOpacity/Button)

【英文标题】：Render a component onPress(TouchableOpacity/Button) in React Native

【发布时间】：2021-05-08 08:23:01

【问题描述】：

我有一个对 Wordnik Api 进行 fetch 调用的函数，它返回一个随机单词。它工作得很好，但我试图设置一个 TouchbaleOpacity/Button 来呈现该组件 onPress 以便每次用户单击按钮时我都可以获得一个随机单词。我在一个单独的文件中有另一个组件，如何在按钮 Press 上调用它？

`export default function HomeScreen( navigation ) 
  const onPress = () => 
    //return component
  ;
  return (
    <View style= flex: 1, alignItems: "center", justifyContent: "center" >
      <TouchableOpacity onPress=onPress>
        <Button title="Next word" />
      </TouchableOpacity>
      <Wordnik />
    </View>
  );
`

【问题讨论】：

请不要通过破坏您的帖子为他人增加工作量。通过在 Stack Exchange (SE) 网络上发帖，您已根据 CC BY-SA license 授予 SE 分发内容的不可撤销权利（即无论您未来的选择如何）。根据 SE 政策，分发非破坏版本。因此，任何破坏行为都将被撤销。请参阅：How does deleting work? …。如果允许删除，则帖子下方左侧有一个“删除”按钮，但仅在浏览器中，而不是移动应用程序中。

【参考方案1】：

在您的组件上添加一个道具key 并在每次按钮的onPress 上更改该键，以便每次更改键时组件都会呈现如下：

export default function HomeScreen( navigation ) 
  const [tempKey, setTempKey] = useState(0);
  const onPress = () => 
    //return component
    setTempKey(tempKey+1);
  ;
  return (
    <View style= flex: 1, alignItems: "center", justifyContent: "center" >
      <TouchableOpacity onPress=onPress>
        <Button title="Next word" />
      </TouchableOpacity>
      <Wordnik key=tempKey.toString() />
    </View>
  );