React-Native-Register-Login-Demo
这是最终的效果图
项目Demo可以到github上下载,方便大家理解。
下面将一步一步带大家完成这个Demo
搭建环境
环境的搭建只需要安装React Native中文网的步骤搭建环境即可,可以选择不同的桌面系统对不同的手机系统的环境的搭建。
这是使用的是最新的0.51版本,想要切换版本的可以点击左上角的版本来切换所需的版本
程序开发
引入依赖
我们的Demo中使用了navigation,所以就需要引入依赖
首先,编辑package.json文件,在”dependencies”中添加”react-navigation”: “git+https://github.com/react-community/react-navigation.git“,这样就引入了依赖,添加后的”dependencies”如下所示
"dependencies": {
"react": "16.2.0",
"react-native": "0.52.0",
"react-navigation": "git+https://github.com/react-community/react-navigation.git"
},
然后,我们就需要安装依赖了,使用命令行(mac的终端,windows的cmd)先进入项目根目录,然后执行npm install命令,然后运行一次项目,如果出错,就需要先将node_modules文件夹删除,然后重新执行一次npm install命令,这样就准备完成了
集中代码
个人习惯将js代码放到同一个文件夹下面,这样方便管理代码,所以我们需要先自己创建一个scene文件夹,然后将App.js文件夹移到scene文件夹中
如果使用的是WebStorm编辑的项目的话,我们移动App.js文件之后,它会自动修改index.js文件,便不用执行下一步了(以防万一,还是打开index.js查看是否正确)
当我们移动了App.js文件之后,运行项目可能出错,这是因为index.js文件中的程序入口指向的是App.js,而在上一步更改了App.js的路径,所以这里需要将路径更改正确
import { AppRegistry } from 'react-native';
import App from './scene/App';
AppRegistry.registerComponent('Demo', () => App);
这就是修改过后的index.js文件内容,注意第二行代码的impoot指向的是scene下的App.js文件
界面搭建
到这里,准备工作就都做完了,现在开始编写界面的文件,因为这个工程用了三个界面,所以我们再新建三个js文件,分别为loginScene.js、registerScene.js、homeScene.js,三个不同的js文件显示三个不同的界面,最后再用navigation来相互跳转即可(后话)
因为界面的搭建非常简单,所以直接贴代码,如果还有不清楚的,可以参考如下几个链接
《Flex 布局教程:语法篇》——阮一峰
《Flex 布局教程:实例篇》——阮一峰
《React-Native 的基本控件属性方法》——冬瓜小生
LoginScene.js
import React, { Component } from 'react';
import {
TouchableOpacity,
StyleSheet,
TextInput,
View,
Text,
Alert,
Button
} from 'react-native';
export default class LoginScene extends Component {
render() {
return (
<TouchableOpacity //用可点击的组件作为背景
activeOpacity={
1.0} //设置背景被点击时的透明度改变值
style={styles.container}>
<View
style={styles.inputBox}>
<TextInput
style={styles.input}
autoCapitalize='none' //设置首字母不自动大写
underlineColorAndroid={
'transparent'} //将下划线颜色改为透明
placeholderTextColor={
'#ccc'} //设置占位符颜色
placeholder={
'用户名'} //设置占位符
/>
</View>
<View
style={styles.inputBox}>
<TextInput
style={styles.input}
autoCapitalize='none' //设置首字母不自动大写
underlineColorAndroid={
'transparent'} //将下划线颜色改为透明
secureTextEntry={
true} //设置为密码输入框
placeholderTextColor={
'#ccc'} //设置占位符颜色
placeholder={
'密码'} //设置占位符
/>
</View>
<TouchableOpacity
style={styles.button}>
<Text
style={styles.btText}>登录</Text> //设置按钮值
</TouchableOpacity>
<TouchableOpacity
style={styles.button}>
<Text
style={styles.btText}>注册</Text> //设置按钮值
</TouchableOpacity>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
input: {
width: 200,
height: 40,
fontSize: 20,
color: '#fff',//输入框输入的文本为白色
},
inputBox: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
width: 280,
height: 50,
borderRadius: 8,
backgroundColor: '#58812F',
marginBottom: 8,
},
button: {
height: 50,
width: 280,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 8,
backgroundColor: '#58812F',
marginTop: 20,
},
btText: {
color: '#fff',
fontSize: 20,
}
});
registerScene.js
import React, { Component } from 'react';
import {
TouchableOpacity,
StyleSheet,
TextInput,
View,
Text,
Alert
} from 'react-native';
export default class RegisterScene extends Component {
render() {
return (
<TouchableOpacity
activeOpacity={
1.0} //设置背景被点击时,透明度不变
style={styles.container}>
<View
style={styles.inputBox}>
<TextInput
style={styles.input}
autoCapitalize='none' //设置首字母不自动大写
underlineColorAndroid={
'transparent'} //将下划线颜色改为透明
placeholderTextColor={
'#ccc'} //设置占位符颜色
placeholder={
'用户名'} //设置占位符
/>
</View>
<View
style={styles.inputBox}>
<TextInput
style={styles.input}
secureTextEntry={
true} //设置为密码输入框
autoCapitalize='none' //设置首字母不自动大写
underlineColorAndroid={
'transparent'} //将下划线颜色改为透明
placeholderTextColor={
'#ccc'} //设置占位符颜色
placeholder={
'密码'} //设置占位符
/>
</View>
<View
style={styles.inputBox}>
<TextInput
style={styles.input}
secureTextEntry={
true} //设置为密码输入框
autoCapitalize='none' //设置首字母不自动大写
underlineColorAndroid={
'transparent'} //将下划线颜色改为透明
placeholderTextColor