樣式未傳遞給自定義組件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

您正在使用無狀態組件錯誤。 如果查看簽名，您會注意到它接受props作為參數：

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