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