我可以通過道具傳遞物品名稱嗎？

Question

我想要完成的是：我已經創建了基於TouchableOpacity的按鈕組件。在我的應用程序中，我有3種類型的不同外觀的按鈕，它們都共享一些樣式，並具有特定的內容。下面是我Button.js看起來像：

import React, { Component } from 'react'; 
import { Text, TouchableOpacity } from 'react-native'; 

class Button extends Component { 
    render() { 
    const { children, onPress, style } = this.props; 
    const { buttonStyle, textStyle } = styles; 

    return (
     <TouchableOpacity onPress={onPress} style={[buttonStyle]}> 
     <Text style={[textStyle]}> 
      {children} 
     </Text> 
     </TouchableOpacity> 
    ); 
    } 
} 

//Commonly shared button styles 
const styles = { 
    textStyle: { 
    alignSelf: 'center', 
    fontSize: 17, 
    paddingTop: 15, 
    paddingBottom: 15 
    }, 
    buttonStyle: { 
    alignSelf: 'stretch', 
    marginLeft: 15, 
    marginRight: 15 
    } 
}; 

//Below are specific appearance styles 
const black = { 
    container: { 
    backgroundColor: '#000' 
    }, 
    text: { 
    color: '#FFF' 
    } 
}; 

const white = { 
    container: { 
    backgroundColor: '#FFF' 
    }, 
    text: { 
    color: '#000' 
    } 
}; 

這將是巨大的，如果我可以使用這個按鈕是這樣的：

<Button onPress={} style='black'>PLAY</Button> 
<Button onPress={} style='white'>CANCEL</Button> 

即默認的buttonStyle和textStyle是從樣式對象中應用的。我只想傳遞一個單詞（'黑色'，'白色'）來引用Button組件中描述的其他樣式對象。

我知道我可以用開關創建一個輔助方法，但我認爲有一個更簡單的方法來做到這一點。在那兒？

非常感謝！

Answer 1

我認爲這將是最短的和乾淨的way

import React, { PropTypes } from 'react'; 
import { Text, TouchableOpacity } from 'react-native'; 

const Button = ({ children, onPress, type }) => (
    <TouchableOpacity onPress={onPress} style={[styles.defaultButton, styles[type].button]}> 
    <Text style={[styles.defaultText, styles[type].text]}> 
     {children} 
    </Text> 
    </TouchableOpacity> 
); 

Button.propTypes = { 
    children: PropTypes.node.isRequired, 
    onPress: PropTypes.func.isRequired, 
    type: PropTypes.oneOf(['white', 'black']).isRequired, 
}; 

const styles = { 
    defaultButton: { 
    alignSelf: 'stretch', 
    marginLeft: 15, 
    marginRight: 15 
    }, 
    defaultText: { 
    alignSelf: 'center', 
    fontSize: 17, 
    paddingTop: 15, 
    paddingBottom: 15 
    }, 
    white: { 
    button: { 
     backgroundColor: '#FFF' 
    }, 
    text: { 
     color: '#000' 
    } 
    }, 
    black: { 
    button: { 
     backgroundColor: '#000' 
    }, 
    text: { 
     color: '#FFF' 
    } 
    }, 
}; 

export default Button; 

添加type && style[type].button如果類型不是必需的道具。像這樣：

const Button = ({ children, onPress, type }) => (
    <TouchableOpacity onPress={onPress} style={[styles.defaultButton, type && styles[type].button]}> 
    <Text style={[styles.defaultText, type && styles[type].text]}> 
     {children} 
    </Text> 
    </TouchableOpacity> 
); 

Button.propTypes = { 
    children: PropTypes.node.isRequired, 
    onPress: PropTypes.func.isRequired, 
    type: PropTypes.oneOf(['white', 'black']), 
}; 

Answer 2

按我對你的問題的理解，請看看這個： -

var styleChangeForButton,styleChangeForText 
class Button extends Component { 
    constructor(props) 
    { 
    super(props) 
    const { children, onPress, style } = this.props; 
    const { buttonStyle, textStyle } = styles; 
    styleChangeForButton = [buttonStyle] 
    styleChangeForText = [textStyle] 

    } 
    onPress() 
    { 
     styleChangeForButton = 'black' 
     styleChangeForText = 'white' 
    } 

    render() { 

    // 

    style 
    return (
     <TouchableOpacity onPress={onPress} style={styleChangeForButton}> 
     <Text style={styleChangeForText}> 
      {children} 
     </Text> 
     </TouchableOpacity> 
    ); 
    } 
} 

//Commonly shared button styles 
const styles = { 
    textStyle: { 
    alignSelf: 'center', 
    fontSize: 17, 
    paddingTop: 15, 
    paddingBottom: 15 
    }, 
    buttonStyle: { 
    alignSelf: 'stretch', 
    marginLeft: 15, 
    marginRight: 15 
    } 
}; 

//Below are specific appearance styles 
const black = { 
    container: { 
    backgroundColor: '#000' 
    }, 
    text: { 
    color: '#FFF' 
    } 
}; 

const white = { 
    container: { 
    backgroundColor: '#FFF' 
    }, 
    text: { 
    color: '#000' 
    } 
}; 

Answer 3

你可以做這樣的事情：

import React, { PropTypes } from 'react'; 
import { StyleSheet, Text, TouchableOpacity } from 'react-native'; 

// Commonly shared button styles 
const defaultStyle = StyleSheet.create({ 
    textStyle: { 
    alignSelf: 'center', 
    fontSize: 17, 
    paddingTop: 15, 
    paddingBottom: 15, 
    }, 
    buttonStyle: { 
    alignSelf: 'stretch', 
    marginLeft: 15, 
    marginRight: 15, 
    }, 
}); 

// Below are specific appearance styles 
const black = StyleSheet.create({ 
    container: { 
    backgroundColor: '#000', 
    }, 
    text: { 
    color: '#FFF', 
    }, 
}); 

const white = StyleSheet.create({ 
    container: { 
    backgroundColor: '#FFF', 
    }, 
    text: { 
    color: '#000', 
    }, 
}); 

const themes = { 
    black, 
    white, 
}; 

function Button({ children, onPress, theme }) { 
    const buttonStyles = [defaultStyle.buttonStyle]; 
    const textStyles = [defaultStyle.textStyle]; 

    if (theme) { 
    buttonStyles.push(themes[theme].container); 
    textStyles.push(themes[theme].text); 
    } 

    return (
    <TouchableOpacity onPress={onPress} style={buttonStyles}> 
     <Text style={textStyles}> 
     {children} 
     </Text> 
    </TouchableOpacity> 
); 
} 

Button.propTypes = { 
    onPress: PropTypes.func.isRequired, 
    theme: PropTypes.string, 
    children: PropTypes.oneOfType([ 
    PropTypes.arrayOf(PropTypes.node), 
    PropTypes.node, 
    ]), 
}; 

export default Button;