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

Question

我有一个对 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>
  );
}`

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