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

问题描述

我有一个函数，它有一个对 Wordnik Api 的 fetch 调用，它返回一个随机单词。它一切正常，但我正在尝试设置一个 TouchbaleOpacity/Button，它将在按下该组件时呈现该组件，因此每次用户单击按钮时我都可以获得一个随机词。我在一个单独的文件中有另一个组件，如何在按钮按下时调用它？

`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>
  );
}`

解决方法

在您的组件上添加一个道具 <div style="height: 600px; background-color: blue;"></div> <div class="outer_div"> <div class="scroll-content-left"> <div></div> </div> <div class="scroll-content-right"> <div> text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br> </div> </div> </div> <div style="height: 600px; background-color: yellow;"></div> 并每次在按钮的 key 上更改该键，以便每次键更改时组件都会呈现如下：

onPress