前言
根据公司业务，需要移动端使用React Native 开发，所以提前先开始学习一下，加以推进。
准备
- 对于RN开发，可以不用太熟悉web开发，最好有iOS开发和安卓开发的基础，要不然在后期调错误的时候会有死的冲动。。。
- HTML 和 CSS 没什么要求，略懂就行，不懂也无所谓。但是JS还是要懂一点(ECMAScript 6 入门)
搭建环境
RN的环境对于我们来说有点蛋疼。。。所以要完全按照RN官方文档上来执行 React Native 中文网
开发工具我使用的是webstore
WebStorm.png
安装好 WebStorm 后，为了更便捷的去开发，我们需要安装一些插件，以及进行一些常用配置。比如RN组件库的安装，添加一些常用的Live Templates等，[React Native]去掉WebStorm中黄色警告
Hello World
所有的环境和软件安装好后，就开始咱们的“hello world”
创建工程HelloWorld.png
创建目录，通过终端进入文件夹cd /Users/rui/Desktop/HelloWorld
然后创建工程 react-native init HelloWorld
等待一会就可以完成下载
由于本人是iOS开发，现阶段演示都通过Xcode来运行
文件内容.png
创建好的文件内容，打开iOS文件夹，运行里面的程序
AppDelegate中代码.png
点击运行后，第一次运行会有点慢，需要下载一些配置文件，成功运行后，只需要在模拟器上执行command + r 就可以运行最新的代码了
好了，开始学习些Hllo World
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Hello World
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
HelloWorld.png
了解APP.js文件
在项目文件夹中有一个App.js的文件，它的作用是
1）组件导入区： 所有用到的组件都需要事先进行导入，包括样式也需要进行导入
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
2）核心代码区：所有逻辑代码编写的地方
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Hello World
</Text>
</View>
);
}
}
3）组件样式区：render() 方法中用到的组件的样式，可以集中在这里编写
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
4）注册启动组件：组件只有注册后才能运行。这里用到的 AppRegistry 也需要在组件导入区进行导入
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
Flex布局
Flex布局是web人员开发必备知识，也是学习RN的必备知识，但是有一些web属性是在RN中没有的，这个以后遇到会一一讲解
登录页面
学完布局后，先来一个简单的页面，常见的登录页面，这里直接放代码，里面加有注释，大家可以自己查看一下
首先我先创建一个名称为LoginView的js文件，在里面进行布局
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TextInput,
} from 'react-native';
var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
export default class loginView extends Component {
render() {
return (
<View style={styles.container}>
{/*{头像}*/}
<Image source={require('../img/111.jpg')} style={styles.iconStyle}/>
{/*账号和密码*/}
<TextInput placeholder={'请输入账号'}
style={styles.textInputStyle}
/>
<TextInput placeholder={'请输入密码'}
style={styles.textInputStyle}
password={true}
/>
{/*登录*/}
<View style={styles.loginBtnStyle}>
<Text style={{color:'white'}}>登录</Text>
</View>
{/*设置*/}
<View style={styles.settingStyle}>
<Text>无法登录</Text>
<Text>新用户</Text>
</View>
{/*三方登录方式*/}
<View style={styles.otherLoginStyle}>
<Text>其他登录方式</Text>
<Image source={require('../img/icon3.png')} style={styles.otherImageStyle}></Image>
<Image source={require('../img/icon7.png')} style={styles.otherImageStyle}></Image>
<Image source={require('../img/icon8.png')} style={styles.otherImageStyle}></Image>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
iconStyle:{
width:80,
height:80,
marginTop:50,
borderRadius:40,
borderWidth:2,
borderColor:'orange',
marginBottom:30,
},
textInputStyle:{
backgroundColor:'white',
width:width,
height:40,
marginBottom:1,
textAlign:'center',
paddingLeft:15,
},
loginBtnStyle:{
height:40,
width:width*0.8,
backgroundColor:'blue',
marginTop:30,
marginBottom:30,
//flex布局
justifyContent:'center',
alignItems:'center',
borderRadius:8
},
settingStyle:{
flexDirection:'row',
width:width*0.8,
justifyContent:'space-between',
},
otherLoginStyle: {
flexDirection:'row',
alignItems:'center',
position:'absolute',
bottom:10,
left:20
},
otherImageStyle:{
width:50,
height:50,
borderRadius:25,
marginLeft:10,
},
});
//输出一个类
module.exports = loginView;
最后将前面介绍过的APP.js文件进行修改，让它显示你写的登录页面
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
var LoginView = require('./login/js/loginView')
export default class App extends Component<{}> {
render() {
return (
<LoginView/>
);
}
}
这样一个完整的登录页面就显示出来了，是不是很简单啊
登录.png
网友评论