react-native组件Button封装与传值

     感觉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,
},