React-native简单button实现

创建TouchableButton.js文件

'use strict';

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
} from 'react-native';

class TouchableButton extends Component {
  render() {
    return (
        <TouchableHighlight 
          underlayColor={this.props.underlayColor}
          activeOpacity={0.5}  
          style={this.props.style}
          onPress={this.props.onPress}
          >
             <Text style={{fontSize:16,color:'#fff'}}>{this.props.text}</Text>
        </TouchableHighlight>
    );
  }
}

module.exports = TouchableButton;

在index.android.js中具体实现为：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  Image,
  View,
  TextInput
} from 'react-native';

var TouchableButton = require('./module/TouchableButton');

class ReactNativeDemo extends Component {
  render() {
    return (
      <View style={{backgroundColor:'#f4f4f4',flex:1}}>
          <Image
              style={styles.style_image} 
              source={require('./app_icon.jpg')}/>
          <TextInput 
              style={styles.style_user_input}
              placeholder='QQ号/手机号/邮箱'
              numberOfLines={1}
              autoFocus={true}
              underlineColorAndroid={'transparent'} 
              textAlign='right'
          />
          <View style={{height:1,backgroundColor:'#f4f4f4'}}/>
          <TextInput 
              style={styles.style_pwd_input}
              placeholder='密码'
              numberOfLines={1}
              underlineColorAndroid={'transparent'} 
              secureTextEntry={true}
              textAlign='right'
          />
          <View  style={styles.style_view_commit}>
            <Text style={{color:'#fff'}}>
               登录
            </Text>
          </View>
          
          <View>
            <TouchableButton 
                underlayColor='#4169e1' 
                style={styles.style_view_button} 
                onPress=
                text='登录有点击效果'>
            </TouchableButton>
          </View>
 
          <View style={{flex:1,flexDirection:'row',alignItems: 'flex-end',bottom:10}}>
             <Text style={styles.style_view_unlogin}>
                 无法登录?
            </Text>
            <Text style={styles.style_view_register}>
                 新用户
            </Text>
          </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  style_image:{
    borderRadius:45,
    height:70,
    width:70,
    marginTop:40,
    alignSelf:'center',
  },
  style_user_input:{  
      backgroundColor:'#fff',
      marginTop:10,
      height:45,
  },
  style_pwd_input:{  
      backgroundColor:'#fff',
      height:45,
  },
  style_view_commit:{  
      marginTop:15,
      marginLeft:10,
      marginRight:10,
      backgroundColor:'#63B8FF',
      borderColor:'#5bc0de',
      height:45,
      borderRadius:5,
      justifyContent: 'center',
      alignItems: 'center',
  },
  style_view_button:{  
      marginTop:15,
      marginLeft:10,
      marginRight:10,
      backgroundColor:'#63B8FF',
      borderColor:'#5bc0de',
      height:45,
      borderRadius:5,
      justifyContent: 'center',
      alignItems: 'center',
  },
  style_view_unlogin:{
    fontSize:15,
    color:'#63B8FF',
    marginLeft:10,
  },
  style_view_register:{
    fontSize:15,
    color:'#63B8FF',
    marginRight:10,
    alignItems:'flex-end',
    flex:1,
    flexDirection:'row',
    textAlign:'right',
  }
});

AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);