样式不会传递给自定义组件React Native

Question

我有一个带有此代码的自定义按钮组件

import React from 'react';
import { TouchableOpacity, View, Text } from 'react-native';
import PropTypes from 'prop-types';
import styles from './styles';
const CustomBtn = ({props, text, onPress }) => (
    <TouchableOpacity {...props} onPress={onPress}>
        <View style={styles.button}>
             <Text style={styles.text}>{text}</Text>
        </View>
    </TouchableOpacity>
);
CustomBtn = {
  text: PropTypes.string,
  onPress: PropTypes.func,
};
export default CustomBtn;

我想在我的视图中覆盖组件的样式（边距，桨板）

<CustomBtn style={styles.BtnMargin} onPress={this.handlePressLogin} text="Login" />

但是我的自定义按钮无法获得样式。如何更改自定义BTN的代码来解决此问题？

Answer 1

您使用的是无状态的组件。如果您查看签名，您可以注意到它接受道具作为参数：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

在行{...props}中，varibale props是不确定的，因为它与普通组件中的 this.props.props相同。您真正想做的是：

const CustomBtn = (props) => (
    <TouchableOpacity {...props} onPress={props.onPress}>
        <View style={styles.button}>
             <Text style={styles.text}>{props.text}</Text>
        </View>
    </TouchableOpacity>
);