在React Native中样式化自定义组件

Question

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

// App.js
import MyCustomComponent from './components/myCustomComponent.js';

render() {
  return (
    <View style={styles.container}>
      <MyCustomComponent style={{marginTop: 10}}/>
    </View>
  );
}

该项目可以正常编译，并且我的自定义组件可以在屏幕上正常显示，但是没有应用marginTop样式。值得注意的是，父View组件的样式确实适用。这是我今天刚刚创建的一个全新项目。这似乎应该是非常基础的，但是却无法正常工作。我该怎么做才能应用这种样式？

自定义组件代码：

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>
    )
  }
}

Answer 1

您可以使用以下代码：

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

现在，styles.container已应用，传递给组件的所有内容style将添加到组件样式中。

我希望这可以帮助您