最近在学习React Native,以前从来没有接触过,而且脑子笨,学起来比较吃力,只能一步一步来,昨天看了一天页面跳转,报的错也摸不着头脑,各种谷歌百度,不知道到底哪错了,最后终于在下班之后成功了,果然下班之后的程序员战斗力翻倍。虽说成功实现页面的跳转了,但是还是稀里糊涂的,不知道怎么就成功了,不过能成功实现就是好的开始嘛,所以今天写篇文章记录一下学习,使用React Navigation导航器一步一步来实现一个登录页面。
先放上React Navigation官方文档,英文文档比较详细。
首先安装React Navigation,安装过程大家参照上面的官方文档,一步一步很详细,跟着做就可以了,不过我安装过程中遇到一个问题,用DOS命令安装一直失败,不知道什么原因,看到一篇文章上说用管理员运行,然后一步一步又来一遍,果然可以了。
Windows+s 打开
安装成功以后新建一个项目 DOS命令进入要新建项目的目录,执行 react-native init LoginDemo
新建项目成功之后进入到项目根目录,执行 react-native run-android(我是android手机)
好的,运行成功,成功的第一步已经迈出。
用WebStorm打开新建的项目,我们在屏幕看到的东西就在App.js中写着。
一个简单的页面可以分为三个部分,参照下图
项目根目录新建一个包app
新建两个JavaScript文件,Login.js 和HelloWorld.js
先编写HelloWorld页面,引入View 和 Text组件,
import {View, Text} from 'react-native';
然后在核心代码中的 return() 中输入以下代码
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Hello World</Text>
</View>
然后修改启动APP打开的页面,项目根目录打开 index.js 修改代码如下:
引入HelloWorld组件,并将注册启动组件修改为HelloWorld
然后重新加载一下项目,等下登录成功之后将跳转到这个页面
好的,接着我们来完成登录页面的编写,布局很简单,两个文本框一个按钮,直接上代码
export default class Login extends Component {
constructor() {
super()
}
render() {
return (
<View style={styles.container}>
<View style={styles.lineTopBottom}>
<Text>账号:</Text>
<TextInput style={styles.textInput}
onChangeText={(account) => this.setState({account})}/>
</View>
<View style={styles.lineTopBottom}>
<Text>密码:</Text>
<TextInput style={styles.textInput} secureTextEntry={true}
onChangeText={(password) => this.setState({password})}/>
</View>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>登录</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
textInput: {
marginLeft: 5,
width: 200,
},
lineTopBottom: {
alignItems: 'center',
flexDirection: 'row',
height: 44,
borderBottomWidth: 1,
borderBottomColor: '#D0D0D0',
},
button: {
justifyContent: 'center',
marginTop: 10,
width: 100,
height: 40,
borderRadius: 20,
backgroundColor: "#1E90FF",
},
buttonText: {
color: "white",
textAlign: "center",
}
})
在TextInput中,我们用 onChangeText={(account) => this.setState({account})} 把输入的账号密码保存在State中,等到登录的时候取出来进行判断,如果有对基本组件使用还不熟悉的朋友,可以看一下ReactNative的中文网或英文网,还有阮一峰老师的Flex 布局教程:语法篇和Flex 布局教程:实例篇,了解一下基本的使用,方便更快的上手。
重新加载来看一下效果,别忘了修改启动组件哦
重新加载后如图所示,我们输入上账号和密码,按下登录按钮,没有任何反应,那是因为我们还没有给按钮添加点击事件
定义一个点击事件调用的方法
//自定义的方法,大家请使用属性来定义
toLogin = () => {
let account = this.state.account
let password = this.state.password
if (account == "abc" && password == "123"){
alert('密码输入正确')
}else {
alert('您输入的账号或密码有误,请重新输入')
}
};
点击按钮来调用 toLogin 这个方法
OK,完美,不过大家在实际写登录页面调用方法别用我这种方法,问题很多,我有点懒~~~
接下来就是关键了,引入组件
import { createStackNavigator, createAppContainer } from "react-navigation";
创建堆栈导航器
const AppNavigator = createStackNavigator({
Login: {
screen: Login
}
});
修改导出组件代码
重新加载,将看到一个带有空导航栏的登录页面
引用React Navigation官方文档的一段话:在React Native中,从Login.js导出的组件是应用程序的入口点(或根组件)——它是所有其他组件派生的组件。与导出createAppContainer的结果相比,在应用程序的根目录下对组件拥有更多的控制权通常很有用,因此让我们导出一个只呈现AppNavigator堆栈导航器的组件。
修改代码
const AppContainer = createAppContainer(AppNavigator);
export default class Login extends React.Component {
render() {
return <AppContainer />;
}
}
然后我们向导航器中添加一条路径
const AppNavigator = createStackNavigator({
Login: {
screen: HomeScreen
},
Hello: {
screen: HelloWorld
},
});
修改toLogin方法中的代码
toLogin = () => {
let account = this.state.account
let password = this.state.password
if (account == "abc" && password == "123"){
this.props.navigation.push('Hello')
}else {
alert('您输入的账号或密码有误,请重新输入')
}
};
再来运行一下程序
登录页面的导航栏如果不想要,可以隐藏掉,在核心代码块中添加以下代码
static navigationOptions = {
header:null, //隐藏顶部导航栏
};
结束,我是IT界的一个小学生,欢迎大家对我多多批评和指教,最后补上完整代码
import React, {Component} from 'react'
import {StyleSheet, View, Text, TextInput, TouchableOpacity} from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";
import HelloWorld from "./HelloWorld";
class HomeScreen extends Component {
constructor() {
super()
}
//自定义的方法,大家请使用属性来定义
toLogin = () => {
let account = this.state.account
let password = this.state.password
if (account == "abc" && password == "123"){
this.props.navigation.push('Hello')
}else {
alert('您输入的账号或密码有误,请重新输入')
}
};
static navigationOptions = {
header:null, //隐藏顶部导航栏
};
render() {
return (
<View style={styles.container}>
<View style={styles.lineTopBottom}>
<Text>账号:</Text>
<TextInput style={styles.textInput}
onChangeText={(account) => this.setState({account})}/>
</View>
<View style={styles.lineTopBottom}>
<Text>密码:</Text>
<TextInput style={styles.textInput} secureTextEntry={true}
onChangeText={(password) => this.setState({password})}/>
</View>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText} onPress={this.toLogin}>登录</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
textInput: {
marginLeft: 5,
width: 200,
},
lineTopBottom: {
alignItems: 'center',
flexDirection: 'row',
height: 44,
borderBottomWidth: 1,
borderBottomColor: '#D0D0D0',
},
button: {
justifyContent: 'center',
marginTop: 10,
width: 100,
height: 40,
borderRadius: 20,
backgroundColor: "#1E90FF",
},
buttonText: {
color: "white",
textAlign: "center",
}
})
const AppNavigator = createStackNavigator({
Login: {
screen: HomeScreen
},
Hello: {
screen: HelloWorld
},
});
const AppContainer = createAppContainer(AppNavigator);
export default class Login extends React.Component {
render() {
return <AppContainer />;
}
}
import React,{Component} from 'react'
import {View, Text} from 'react-native';
export default class HelloWorld extends Component{
constructor(){
super()
}
render(){
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Hello World</Text>
</View>
)
}
}