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

【问题标题】：Render a component onPress(TouchableOpacity/Button) in React Native在 React Native 中渲染组件 onPress(TouchableOpacity/Button)
【发布时间】：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? …。如果允许删除，则帖子下方左侧有一个“删除”按钮，但仅在浏览器中，而不是移动应用程序中。

标签： react-native api react-functional-component touchableopacity onpress

【解决方案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>
  );
}

【讨论】：