React Native Expo CLI中如何访问自定义组件属性

React 组件默认是封装隔离的，父组件无法直接访问子组件内部定义的方法、样式，标准实现方式是通过props 传参，把父组件的点击回调、自定义样式传入子组件绑定使用即可，这也是React官方推荐的父子组件通信方式。

第一步：改造自定义按钮组件 #

首先修正你原有代码的两个问题：

• 不要嵌套Pressable和TouchableOpacity两个可点击组件，会导致点击事件触发异常，保留任意一个即可
• 给组件增加props接收逻辑，支持外部传入点击回调、自定义样式、按钮文字，同时保留默认样式兜底

改造后的自定义组件代码：

// components/button_component.js
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

// 组件接收props参数：onPress（点击回调）、buttonStyle（按钮容器样式）、textStyle（文字样式）、title（按钮文字）
export default function ButtonComponent({ 
  onPress, 
  buttonStyle, 
  textStyle, 
  title = "Sign in" // 给按钮文字设置默认值
}) {
  return(
    <View>
      <TouchableOpacity 
        // 绑定外部传入的点击事件，没传的话默认给空函数避免报错
        onPress={onPress ?? (() => {})}
        // 样式合并：先加载默认样式，再加载外部传入的样式，外部样式会覆盖同属性默认值
        style={[styles.buttonContainer, buttonStyle]}
      >
        <Text style={[styles.buttonTitle, textStyle]}>{title}</Text>
      </TouchableOpacity>
    </View>
  )
}

// 组件默认样式
const styles = StyleSheet.create({
  buttonContainer: {
    backgroundColor: '#2196F3',
    padding: 12,
    borderRadius: 8,
    alignItems: 'center'
  },
  buttonTitle: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '500'
  }
})

第二步：在主文件（父组件）中传入属性 #

调用自定义组件时，直接把你需要的点击逻辑、自定义样式作为属性传给组件即可：

// 主文件
import { View, Text, StyleSheet, Alert } from 'react-native';
import ButtonComponent from "../components/button_component";

export default function Home(){
  // 自定义点击逻辑
  const handleLogin = () => {
    Alert.alert('提示', '按钮被点击了')
    // 这里写登录、页面跳转等业务逻辑即可
  }

  return(
    <View style = {styles.homeContainer}>
      <Text style = {styles.head}>Book App Login</Text>
      <View style = {styles.buttonWrapper}>
        {/* 给自定义组件传参 */}
        <ButtonComponent
          onPress={handleLogin} // 传入点击回调
          // 传入自定义按钮样式，会覆盖默认样式的同名属性
          buttonStyle={{
            backgroundColor: '#ff6b35',
            width: 240,
            marginTop: 40
          }}
          // 传入自定义文字样式
          textStyle={{
            fontSize: 18
          }}
          // 也可以自定义按钮文字，不传就默认显示Sign in
          title="立即登录"
        />
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  homeContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20
  },
  head: {
    fontSize: 24,
    fontWeight: 'bold'
  },
  buttonWrapper: {
    marginTop: 60
  }
})

补充说明 #

• 上述方式可以覆盖99%的自定义组件使用场景：父组件可以完全控制按钮的点击行为、外观样式，同时子组件保留默认配置，不需要父组件每次都传全所有参数
• 如果你确实需要直接访问子组件内部的实例属性（非特殊场景不推荐），可以结合forwardRef+useImperativeHandle实现，但普通的事件、样式传递用props即可，代码更易维护
• 注意你原有代码里自定义组件导出的函数名和主文件导入名不一致，统一命名可以避免不必要的运行报错

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