创建可重用 - 运行时计算的 StyleSheet 样式

Question

据我所知，React Native 的文档展示了样式的硬编码值。

我是一名经验丰富的 OOP，我想构建更多可重用的组件。例如，React Native 文档教你这种设计元素的方法：

renderButton: function() {
  return (
    <TouchableHighlight onPress={this._onPressButton}>
      <Image
        style={styles.button}
        source={require('image!myButton')}
      />
    </TouchableHighlight>
  );
},

var styles = StyleSheet.create({
  button: {
    width: 80,
  },
});

据我所知，如果以这种方式完成，则没有很好的解决方案来拥有不同的按钮组件。

理想情况下，我希望能够做到这一点：

class Button extends Component {
  render() {
    return (
      //render stuff according to passed in attributes
    );
  }
}

//usage
<Button width="50" height="40" onPress={this.buttonPressed}/>
<Button width="100" height="20" onPress={this.anotherButtonPressed}/>

但是，作为 JavaScript 的初学者，我很难定义一个能够执行此操作的类。任何建议表示赞赏。

Answer 1

使用扩展运算符扩展现有样式定义

您可以使用spread operator 来扩展预定义样式和一些额外的定义。只需使用预定义样式 (styles.button) 和其他样式 ({width, height}) 扩展一个空对象 (...{})。

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'blue'
  }
});

export default class Button extends Component {
  render() {
    const {width, height} = this.props;
    // Combine the predefined styles with some additional definitions
    const style = [...{}, styles.button, { width, height}]

    return (
      <View style={style}>
        <Text>Button</Text>
      </View>
    );
  }
}

Answer 2

尝试这样做：

button.js

export default class Button extends Component {
  render(){
    return (
      <View style={{ width:this.props.width, height: this.props.height }}>
        <Text>{this.props.text}</Text>
      </View>
    )
  }
}

然后，像这样在你的视图中使用它：

import Button from './button'

<Button height={50} width={200} text="Hey, this is a button" />