javascript - 如何在 native react 中将按钮从一个类导入到另一个类

Question

按钮.js

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

export default function Btn (bgColor, textColor, btnLabel) {
  return (
    <TouchableOpacity
      style={{
        backgroundColor: bgColor,
        borderRadius: 100,
        alignItems: 'center',
        width: 250
      }}
    >
      <Text style={{ color: textColor, fontSize: 22, fontWeight: "bold" }}>
        {btnLabel}
      </Text>
    </TouchableOpacity>
  );
}

Home.js

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Background from './Background';
import Btn from './Btn';
import { darkGreen } from './Constants';
// create a component
export default function Home (){
    return (
        <Background>
            <View style= {{ marginHorizontal: 40, marginVertical: 100}}>
           <Btn bgColor={darkGreen} textColor='white' btnLabel="Login"/>
            </View>
            
        </Background>
        
    );
};

// define your styles
const styles = StyleSheet.create({});

Answer 1

方法一

您可以简单地调用 Button 组件作为函数，如下所示

<Background>
  <View style= {{ marginHorizontal: 40, marginVertical: 100}}>
    {Btn(darkGreen,'white',"Login")}
  </View>
</Background> 

方法2

您可以像下面这样初始化 Button 组件

export default function Btn ({bgColor, textColor, btnLabel}) {
   ...
}

注意:当你不像函数一样调用组件时，你需要像上面那样解构 props