创建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);