React Native TypeScript中点击按钮后无法在页面渲染文本的问题求助

嘿，我来帮你搞定这个问题！你现在遇到的核心问题是：虽然getDuck函数返回了<Text>组件，但你只是在onPress里调用了这个函数，并没有把返回的组件加入到页面的渲染树中——React Native只会渲染组件return语句里的JSX内容，所以直接调用函数返回组件是不会显示的。

咱们需要用React的状态管理来追踪随机数，当状态更新时，组件会自动重新渲染并显示新内容。下面是修改后的完整代码：

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const YourComponent = () => {
  // 声明状态变量，初始值为null表示还没生成随机数
  const [randomNumber, setRandomNumber] = useState<number | null>(null);

  const getDuck = () => { 
    const number = Math.floor(Math.random()*5000 + 1); 
    alert(number); 
    // 这里不再返回组件，而是更新状态
    setRandomNumber(number);
  };

  return( 
    <View style={{flex: 1, justifyContent: "center", margin: 8}}> 
      <Text>Random number</Text> 
      <Button title="Press me" onPress={getDuck} color="#32a852" /> 
      {/* 当randomNumber有值时，渲染这个文本组件 */}
      {randomNumber !== null && (
        <Text style={{marginTop: 20, fontSize: 18}}>
          生成的随机数：{randomNumber}
        </Text>
      )}
    </View> 
  );
};

export default YourComponent;

关键改动说明： #

• 引入了useState钩子：用来存储和更新随机数状态，这是React函数组件管理内部状态的标准方式。
• 修改getDuck函数：不再返回JSX，而是调用setRandomNumber更新状态。当状态变化时，React会自动重新渲染组件。
• 在渲染结构中添加条件渲染：只有当randomNumber不为null时，才显示包含随机数的<Text>组件，避免初始状态下显示空内容。

这样修改后，点击按钮就能看到页面上显示生成的随机数啦！

内容的提问来源于stack exchange，提问作者user14141591