スタイルは、カスタム・コンポーネントに

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

あなたはstateless componentを間違って使用しています。あなたが署名を見れば、あなたはそれが引数として小道具を受け入れることに気づくことができます：それは通常のコンポーネントでthis.props.propsと同じであるため、ライン{...props} varibale propsで

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

は未定義です。あなたが本当にしたいことは：

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