学习背景
公司目前呢，在另外一个项目有采用React Native,我们这个项目目前不忙，在主管的建议下，我们学起了RN，万事开头难，要学个东西，首先还是得去试着玩一下，看有什么难点，自己需要去学习些什么，然后总结一下，逐个突破。
搭建环境及初始化
- 环境搭建参考官方,介绍的非常详细:https://reactnative.cn/docs/0.36/getting-started.html
- 初始化及运行
//新建RNExample项目，并安装相关依赖
react-native init RNExample
//进入文件夹，编译运行项目
cd RNExample
react-native run-ios
Hello World 编写
学习一门语言，最开始的项目一般是入门级别的项目Hello World，下面我们开始吧，找到项目RNExample文件夹下的index.js(以前是index.ios.js),复制以下代码进去，run一下即可看到效果
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class RNExample extends Component {
render() {
return (
<Text>Hello world 啊哈哈哈哈哈!</Text>
);
}
}
// 注意，这里用引号括起来的'RNExample'必须和你init创建的项目名一致
AppRegistry.registerComponent('RNExample', () => RNExample);
搭个简单的Tabbar架子
我们都知道Tabbar上有几个Item，每个Item上有对应的Icon和标题，每点击一个Item都可以切换页面，所以可以先写个返回Item的方法,里面设置一些属性以及相关联的事件
// 返回 TabBar 的 Item
renderTabBarItem(title, selectedTab, image, selectedImage, component, badgeText, subscription) {
return(
<TabNavigator.Item
selected={this.state.selectedTab === selectedTab}
title={title}
badgeText={badgeText == 0 ? '' : badgeText}
selectedTitleStyle={{color:'black'}}
renderIcon={() => <Image source={{uri:image}} style={styles.tabbarIconStyle} />}
renderSelectedIcon={() => <Image source={{uri:selectedImage}} style={styles.tabbarIconStyle} />}
onPress={() => this.clickItem(selectedTab, subscription)}>
<Navigator
initialRoute={{
name:selectedTab,
component:component
}}
configureScene={(route) => this.setNavAnimationType(route)}
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params}
navigator={navigator}
loadDataNumber={() => this.loadDataNumber()} />
}}
/>
</TabNavigator.Item>
);
}
在render()方法里进行调用，初始化tabbar
render() {
return (
<TabNavigator
tabBarStyle={this.state.isHiddenTabBar !== true ? {} : {height:0, overflow:'hidden'}}
sceneStyle={this.state.isHiddenTabBar !== true ? {} : {paddingBottom:0}}
>
{this.renderTabBarItem("首页", 'home', 'tabbar_home_30x30', 'tabbar_home_selected_30x30', Home, this.state.cnbadgeText, "clickHomeItem")}
{this.renderTabBarItem("一键交单", 'htt', 'tabbar_abroad_30x30', 'tabbar_abroad_selected_30x30', Htt, this.state.usbadgeText, "clickHTItem")}
{this.renderTabBarItem("我的", 'mine', 'tabbar_rank_30x30', 'tabbar_rank_selected_30x30', Mine)}
</TabNavigator>
);
}
Home, Htt, Mine为单独创建的三个js文件，对应三个tab页面,下面我们写个简单的控件吧
1.Htt页面 SectionList控件的使用，就是ios中的tabview，代码过于简单，稍微看下就懂了
import React, { Component } from 'react';
import {StyleSheet, Text, View,FlatList,SectionList,Dimensions,} from 'react-native';
var {height: deviceHeight, width: deviceWidth} = Dimensions.get('window');
export default class Htt extends Component <{}> {
render() {
return (
<View style={styles.container}>
<SectionList
sections={[
{title: "你个哈",data : ['nijijin']},
{title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie','Jackson', 'James', 'Jilliang个安慰；阿帆；收款方那可是的那个；离开过那倒是；格兰卡戴珊；干苏格拉底桑打死了；范大师；浪费可能大；两个散发了三年发生；发哪的时空裂缝那时都；发你看看', 'Jimmy', 'Joel', 'John', 'Julie']},
]}
renderItem={({item}) => <Text numberOfLines={10} style={styles.item}>{item}</Text>}
renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 22
},
sectionHeader: {
paddingTop: 2,
paddingLeft: 10,
paddingRight: 10,
paddingBottom: 2,
fontSize: 14,
fontWeight: 'bold',
backgroundColor: 'rgba(247,247,247,1.0)',
},
item: {
flex: 1,
padding: 10,
fontSize: 18,
// height: 40,
//设置下面这个换行
flexWrap: 'wrap',
width : deviceWidth,
backgroundColor : 'red'
},
});
哈哈，是不是很简单，不用急，复杂的都在后面，这只是学习的第一步,但是这一步也很重要额，树立点信心。。。(⊙v⊙)
屏幕快照 2018-01-24 下午5.02.26.png
RN常用命令
1.react-native --version //查看当前reactNative版本
2.sudo npm update -g react-native-cli //更新全局的reactNative到最新版本
3.npm info react-native //查看服务器端的reactNative的各版本信息
4.npm install //给下载的普通工程下载安装RN环境,根据配置的package.json
4.npm start //开启nodejs服务器，客户端可连接下载react js代码，注意debug setting里的ip和端口号分别是电脑 ip:8081
5.react-native upgrade //根据package.json配置的RN版本,更新RN环境代码
6.react-native run-android //运行Android工程
7.react-native run-ios //运行IOS工程
8.react-native init 工程名 //初始化一个工程、下载React Native的所有源代码和依赖包
9.npm install --save react-native@0.18 //项目降级或升级到指定版本,记得react-native upgrade更新一下项目依赖等
10. npm install react-native-storage --save // 安装某个lib到项目中
RN学习资料
*React脚手架create-react-app : http://blog.csdn.net/qtfying/article/details/78665664
*React Native专题: http://www.lcode.org/react-native/
*React Native 組件生命周期: https://www.jianshu.com/p/4784216b8194
*es6学习网址 http://es6.ruanyifeng.com/
*react相关 https://reactjs.org/docs/hello-world.html
问题总结
1.Remote debugger is in a background tab which may cause apps to perform slowly……
解决方式: 只要把那个chrome的Tab页保持最前，窗口不要最小化就好了。
2.程序运行 一直不动显示 Loading dependency graph, done.
解决方式：端口被占用，把开发工具，命令终端都关掉，重新run。
学习的思路
1.react语法=>{jsx,es6 }
2.Flex布局
3.常用组件，网络
网友评论