96493823-9A5E-4ED2-B2FD-573EFDD6C481.png
新手入坑RN，多动手才是王道，把 React Native 中文网的入门基础知识看完：
DFED8E50-4332-49DA-B944-C0918D6267CD.png
有中文的时候，人就会变懒的感觉，还是要多看官网的，依赖中文是一种病，看来得治下。虽然看完了，但还是一脸懵逼的，所以决定来写一个登录界面来熟悉下RN的写法。这里就基于上篇引导页的工程来写，有兴趣的也可以过去看下，先看整体工程结构：
E8FD7357-E523-46CD-A353-73F41ABA98DC.png
新手级别内容，直接上代码了，login.js 内容：
'use strict';
import React, {Component} from 'react';
import { View, Text, TextInput, StyleSheet, Image, PixelRatio, } from 'react-native';
import Button from '../component/Button';
export default class extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
};
}
render() {
return (
<View style={styles.view}>
<View style={styles.editGroup}>
<View style={styles.username}>
<TextInput
style={styles.edit}
placeholder="用户名"
placeholderTextColor="#c4c4c4"
onChangeText={(text) => this.setState({text})}
/>
</View>
<View style={{height: 1/PixelRatio.get(), backgroundColor:'#c4c4c4'}}/>
<View style={styles.password}>
<TextInput
style={styles.edit}
placeholder="密码"
placeholderTextColor="#c4c4c4"
secureTextEntry={true}
onChangeText={(password) => this.setState({password})}
/>
</View>
<View style={{marginTop: 10}}>
<Button text="登录" onPress={this._handleClick.bind(this)}/>
</View>
</View>
</View>
);
}
_handleClick() {
console.log('username:' + this.state.text);
console.log('password:' + this.state.password);
}
}
const styles = StyleSheet.create({
view: {
flex: 1,
backgroundColor: 'rgb(22,131,251)',
},
editGroup: {
margin: 20,
},
username: {
marginTop: 100,
height: 48,
backgroundColor: 'white',
justifyContent: 'center',
borderTopLeftRadius: 3,
borderTopRightRadius: 3,
},
password: {
height: 48,
backgroundColor: 'white',
justifyContent: 'center',
borderBottomLeftRadius: 3,
borderBottomRightRadius: 3,
},
edit:{
height: 40,
fontSize: 13,
backgroundColor: '#fff',
paddingLeft: 15,
paddingRight: 15,
},
});
这里需要提供 username 和 password 两个变量来保存下用户名和密码，其它的目测真的没有什么好说的了。看不懂的就只能先去看下文档再回头看了~~
_handleClick() {
console.log('username:' + this.state.text);
console.log('password:' + this.state.password);
}
这里是点击事件的调用方法，打印下用户名和密码的信息。
自定义 Button.js 内容：
'use strict';
import React, {Component, PropTypes} from 'react';
import { Text, View, StyleSheet, Platform, TouchableHighlight, TouchableNativeFeedback } from 'react-native';
export default class Button extends Component {
render() {
if (Platform.OS === 'android') {
return(
<TouchableNativeFeedback
onPress={this.props.onPress}>
{this._renderContent()}
</TouchableNativeFeedback>
);
} else if (Platform.OS === 'ios') {
return(
<TouchableHighlight
onPress={this.props.onPress}>
{this._renderContent()}
</TouchableHighlight>
);
}
}
_renderContent() {
return(
<View style={styles.content}>
<Text style={styles.text}>{this.props.text}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
text: {
color: 'white',
fontSize: 13,
},
content: {
height: 45,
backgroundColor: '#046ada',
alignItems:'center',
justifyContent:'center',
borderRadius: 3
},
});
这里通过Platform.OS来判断使用的系统，为iOS 和 Android 提供两个不同的button样式。
点击方法通过 this.props.onPress 引用过来。其他的就是样式了~~
新手入门RN的同学们，千万不想相信 react native 中文网推荐的东方耀的视频，买了vip入去，发现视频不更新，先不说视频质量怎么样，感觉照搬某课网的，这都可以忍，但天天推广one 点公益，也敢叫公益的公益。被骗得不要不要。
