[教程] React Native基础实战（1）—— 制作一个简单的按钮

开始前先说点什么

开始使用React Native后你会很快发现，在其组件库中找不到一个好用的按钮。虽然，在最近的更新中已经出现了一个Button组件，但是这个Button的外观在Adroid和iOS系统下的外观截然不同（见下图），所以这就使得做一个按钮变得非常重要。虽然有很多第三方的包都有按钮，但是即使是为了理解React Native的工作原理，自己做一个按钮也是非常有必要的。

本教程使用Expo Snack制作，这是一款非常好用的工具，可以让你在线调试React Native，并且还预装了一些常用的库。项目完成效果请见https://snack.expo.io/Sy7Utsv-W， 如果登陆有问题则可能需要翻墙。

从结果出发思考需求

使用React的一大优势就是他基于组件的设计，可以开发一次然后随处使用。所以我们首先要做的是从使用者的角度思考，这个组件应该具有哪些KPI，然后再考虑如何实现。这可以称为Wish-Driven Design（基于想象的设计）。

假设我们要做后图中的按钮，那么我希望只需要写一样代码，这里所有的颜色和样式都是默认的：

<Button tag="Press Me" onPress={this.onPress}/>

但是同时，我还希望能够方便的对于按钮的颜色和字体等进行定制，所以Button组件还应该能够这样使用：

<Button tag="Press Me"     onPress={() => Alert.alert("Pressed...")}     buttonStyle={[styles.button]}    textStyle={[styles.textStyle]} />const styles = StyleSheet.create({  button: {    backgroundColor: 'blue'  },  textStyle: {    fontSize: 25,  }})

代码实现

一个Button由三个部分构成：
－ TouchableOpacity组件在每次点击时都会改变其下所有子组件的透明度，这样做是为了给用户反馈，告诉他们你已经点击了这个按钮。该组件广泛用于各种会被点击的组件。
－ View负责按钮的外观，这里主要是长、宽和背景颜色等。
－ Text负责文字的外观

class Button extends Component {  render() {    return (      <TouchableOpacity onPress={this.props.onPress}>        <View style={[buttonStyles.button, this.props.buttonStyle]}>          <Text style={[buttonStyles.text, this.props.textStyle]}>{this.props.tag}</Text>        </View>      </TouchableOpacity>    );  }}

下面就几个关键点做一下说明：

将组件长度设置为父组件长度

React Native的组件位置和长宽等一般是通过flexbox模型进行控制的，这个模型和css中的基本一致。如果对css不熟悉，请参考相关文档并玩玩这个游戏：https://flexboxfroggy.com/。

这里View在没有任何设置的情况下只会取Text组件的长宽，紧紧围绕在Text的周围。所以我们使用padding让按钮有了高度，而对于宽度，我们希望能够充满父组件的宽度。这里width设置为100％是不被React Native支持的，我们于是选择设置alignSelf属性为'stretch'。

button: {    alignSelf: 'stretch',  },

使props中的样式覆盖组件的默认样式

在需求中我们提到，希望能够在需要的时候设置按钮的样式。所以我们在设置样式的时候使用了这样的语法：

 <View style={[buttonStyles.button, this.props.buttonStyle]}>

在React Native运行的时候，他会使用后面的样式覆盖前面的，其机制和css类似。

完整代码展示

import React, { Component } from 'react';import { TouchableOpacity, View, Text, StyleSheet, Alert } from 'react-native';import { Constants } from 'expo';class Button extends Component {  render() {    return (      <TouchableOpacity onPress={this.props.onPress}>        <View style={[buttonStyles.button, this.props.buttonStyle]}>          <Text style={[buttonStyles.text, this.props.textStyle]}>{this.props.tag}</Text>        </View>      </TouchableOpacity>    );  }}const buttonStyles = StyleSheet.create({  button: {    backgroundColor: '#841584',    padding: 13,    alignSelf: 'stretch',    alignItems: 'center'  },  text: {    fontSize: 18,    color: '#fff',    fontWeight: 'bold',  }});export default class App extends Component {  render() {    return (      <View style={[styles.container]}>        <Button tag="Press Me" onPress={() => Alert.alert("Pressed...")} buttonStyle={[styles.button]} textStyle={[styles.textStyle]} />      </View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    paddingTop: Constants.statusBarHeight,    backgroundColor: '#ecf0f1',    paddingHorizontal: 5,  },  button: {    backgroundColor: 'blue'  },  textStyle: {    fontSize: 25,  }})

版权声明：本作品采用知识共享署名 3.0 未本地化版本许可协议进行许可，欢迎转载，请注明转载自Andrew Xie的学习笔记（http://blog.csdn.net/andrewxy）。