React native 在react native中设置自定义组件的样式

我试图在react native中将样式添加到自定义组件中，但无论我做什么，样式都没有效果。这是我的密码：

//App.js
从“./components/MyCustomComponent.js”导入MyCustomComponent；
render（）{
返回(
);
}

项目编译良好，自定义组件在屏幕上显示良好，但未应用marginTop样式。值得注意的是，父

视图

组件的样式确实正确应用。这是我今天刚刚创建的一个全新项目。这看起来应该是非常基本的，但就是不起作用。我可以如何应用此样式

自定义组件代码：

import React, {Component} from 'react';
import {TextInput, StyleSheet, Image, View, Button} from 'react-native';

type Props = {};
export default class MyCustomComponent extends Component<Props> {

  render() {
    return (
      <View style={styles.container}>
        <Image
          source={{ uri: "source here" }}
          style={{ width: 50, height: 50 }}
         />
         <TextInput
          style={{ height: 50 }}
          placeholder="Search"
        />
      </View>
    )
  }
}

import React，{Component}来自'React'；
从“react native”导入{TextInput、样式表、图像、视图、按钮}；
类型Props={}；
导出默认类MyCustomComponent扩展组件{
render（）{
返回(
)
}
}

您需要自己在

MyCystomComponent

中应用此样式。例如：

const MyCustomComponent = ({style}) => (
  <View style={style}> // This will be the style that is passed as a prop.
  </View>
);

constmycustomcomponent=（{style}）=>(
//这将是作为道具传递的样式。
);

通过将样式作为道具传递，可以将样式应用于自定义组件

及

在MyCustomComponent中将其用作style={this.props.style}

import React, {Component} from 'react';
import {TextInput, StyleSheet, Image, View, Button} from 'react-native';

type Props = {};
export default class MyCustomComponent extends Component<Props> {

  render() {
    return (
      <View style={[styles.container,{...this.props.style}]}>//<--Use like this---
        <Image
          source={{ uri: "source here" }}
          style={{ width: 50, height: 50 }}
         />
         <TextInput
          style={{ height: 50 }}
          placeholder="Search"
        />
      </View>
    )
  }
}

import React，{Component}来自'React'；
从“react native”导入{TextInput、样式表、图像、视图、按钮}；
类型Props={}；
导出默认类MyCustomComponent扩展组件{
render（）{
返回(
// 您可以使用以下代码：

export default class MyCustomComponent extends Component<Props> {
  render() {
    return (
      <View style={[styles.container, {...this.props.style}]}>
        ...
      </View>
    )
  }
}

导出默认类MyCustomComponent扩展组件{
render（）{
返回(
...
)
}
}

现在，应用了
style.container
，通过
style
传递给组件的所有内容都将添加到组件样式中

我希望这能帮助您
例如，让我们更改自定义卡的背景色。
定制卡：

export default function MyCard({color}) {
    return (
         <View style={[styles.card, {backgroundColor: color}]}>
        </View>
    )
}

导出默认函数MyCard（{color}）{
返回(
)
}

在另一个文件中

<MyCard color={"pink"} />



这里，styles.card是在自定义卡片文件中添加的样式，颜色在组件使用期间给定。
注意：MyCard（{color}）如果您没有添加突出显示的括号，它将无法工作。我遇到了这个问题。
将此代码添加到您的
CustomText.js
文件（自定义组件）中：

从“React”导入React
从“react native”导入{Text，StyleSheet}
const CustomText=props=>{
返回（{props.children}）；
}
导出默认自定义文本；
const styles=StyleSheet.create({
正文：{
颜色：“#000”
}
})

并在文件中使用：

<CustomText style={styles.text}>My text</CustomText>

const styles = StyleSheet.create({
    text:{
        fontSize: 20,
    }
});

我的文本
const styles=StyleSheet.create({
正文：{
尺寸：20，
}
});

此代码
merge
设置样式并将所有属性传递给自定义组件。
能否显示自定义组件的代码？将
MyCustomComponent
设置为
容器
视图的样式
<CustomText style={styles.text}>My text</CustomText>

const styles = StyleSheet.create({
    text:{
        fontSize: 20,
    }
});