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

Question

我有一个函数可以调用 Wordnik Api 并且它 returns 一个随机词。它工作正常，但我正在尝试设置一个 TouchbaleOpacity/Button 来呈现该组件 onPress 以便每次用户单击按钮时我都可以获得一个随机词。我有另一个组件在一个单独的文件中，如何在按下按钮时调用它？

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

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

Render a component onPress(TouchableOpacity/Button) in React Native

react-native

api

react-functional-component

touchableopacity

onpress