React Native中如何从一个组件文件导入按钮组件到另一个文件

在React Native开发中，若要在一个组件文件中使用另一个文件定义的按钮组件，可参考以下实现步骤与代码示例：

1. 定义按钮组件（Button.js） #

首先创建按钮组件文件，通过export default导出组件，供其他文件导入：

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

// React组件需通过props对象接收外部传入的属性
export default function Btn(props) {
  const { bgColor, textColor, btnLabel } = props;
  
  return (
    <TouchableOpacity
      style={{
        backgroundColor: bgColor,
        borderRadius: 100,
        alignItems: 'center',
        width: 250,
        paddingVertical: 12 // 添加内边距优化点击区域与视觉效果
      }}
    >
      <Text style={{ color: textColor, fontSize: 22, fontWeight: "bold" }}>
        {btnLabel}
      </Text>
    </TouchableOpacity>
  );
}

2. 导入并使用按钮组件（Home.js） #

在需要使用按钮的页面组件中，导入按钮组件并传递所需属性：

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Background from './Background';
import Btn from './Btn'; // 导入同级目录下的Btn组件
import { darkGreen } from './Constants';

export default function Home() {
    return (
        <Background>
            <View style={{ marginHorizontal: 40, marginVertical: 100 }}>
                {/* 向Btn组件传递背景色、文字色、按钮文本属性 */}
                <Btn bgColor={darkGreen} textColor='white' btnLabel="Login" />
            </View>
        </Background>
    );
};

const styles = StyleSheet.create({});

核心要点说明 #

• 组件导出：使用export default导出组件，确保其他文件能直接导入。
• 组件导入：通过import 组件名 from '文件相对路径'导入，路径需根据文件实际位置调整（示例中为同级目录）。
• 属性传递：在使用组件时通过属性名=属性值的方式传递数据，子组件需从props对象中解构获取这些值（原示例直接接收参数的写法不符合React规范，已修正）。

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