感觉React native开发就是要先写组件(component),然后用组件去组装页面。组件写好了,后续开发就简单多了。不多说了。
1.下面介绍下自定义圆角Button的封装。
/** * Created by chenjialin on 17/3/30. */ 'use strict'; import React, { PureComponent,Component} from 'react'; import {observer} from 'mobx-react/native'; import { StyleSheet, Text, TouchableOpacity, TouchableHighlight, View } from 'react-native'; @observer class NButton extends Component { render() { return ( <TouchableHighlight style={this.props.style} activeOpacity={0.5} underlayColor="#B5B5B5" onPress={this.props.onPress}> <Text style={this.props.TextStyle}>{this.props.text}</Text> </TouchableHighlight> ); } } module.exports = NButton;
注意:this.props.style 、this.props.onPress、this.props.TextStyle、this.props.text都是接收参数。
2.实现类如下:
<NButton text="启动应用" style={styles.button1} TextStyle={styles.welcome} onPress={() => Alert.alert( 'Alert Title', 'Massege', [ {text: 'Foo', onPress: () => console.log('Foo Pressed!')}, {text: 'Bar', onPress: () => console.log('Bar Pressed!')}, ] )} />
样式
button1: { alignSelf:'center', borderWidth: 1, borderColor: '#B5B5B5', borderRadius: 5, },
welcome: { fontSize: 18, textAlign: 'center', margin: 10, },