React Native：点击Pressable组件如何修改Text组件属性？

在React Native里，不能直接跨组件操作另一个组件的属性，得遵循状态提升的原则——把共享状态放在父组件，通过props传递给子组件，再用回调函数更新状态。具体修改步骤如下：

1. 在父组件(App)中定义状态和更新逻辑 #

在App组件里添加控制Text属性的状态（比如文本颜色、字号），以及对应的更新函数。

2. 将状态和更新函数传递给子组件 #

把状态传给displayText，让Text组件使用这些状态值；把更新函数传给displayPressable，在点击Pressable时调用它修改状态。

3. 修改子函数为接收props的形式 #

让displayText和displayPressable接收props参数，分别使用传入的状态和更新函数。

修改后的完整代码：

import { useState } from 'react';
import { View, Text, Pressable, GestureResponderEvent } from 'react-native';

function App() {
  // 定义控制Text属性的状态，这里以文本颜色为例
  const [textColor, setTextColor] = useState('#000000');

  // 更新状态的函数，点击Pressable时调用
  const handleTextColorChange = (evt: GestureResponderEvent) => {
    setTextColor(textColor === '#000000' ? '#ff0000' : '#000000');
  };

  return (
    <View>
      <View>
        {/* 把状态传给displayText */}
        {displayText({ textColor })}
      </View>
      <View>
        {/* 把更新函数传给displayPressable */}
        {displayPressable({ onPressHandler: handleTextColorChange })}
      </View>
    </View>
  );
}

// displayText接收props，使用传入的状态渲染Text
function displayText(props: { textColor: string }) {
  return (
    <Text style={{ color: props.textColor, fontSize: 16 }}>
      点击Pressable改变我的颜色
    </Text>
  );
}

// displayPressable接收props，在点击时调用传入的更新函数
function displayPressable(props: { onPressHandler: (evt: GestureResponderEvent) => void }) {
  return (
    <Pressable onPress={props.onPressHandler} style={{ padding: 10, backgroundColor: '#eee', marginTop: 10 }}>
      <Text>点击我</Text>
    </Pressable>
  );
}

export default App;

关键说明： #

• 状态textColor存放在父组件App中，所有依赖这个状态的组件都能拿到最新值。
• 点击Pressable时，调用handleTextColorChange修改状态，React会自动重新渲染displayText，让Text组件的颜色跟着变化。
• 如果需要修改多个属性，只需要在App中添加对应的状态（比如[fontSize, setFontSize]），然后传递给displayText即可。

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