| React-Native

React-Native从入门到出门左拐

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。

Windows配置

安装GenymotionShell

安装react-native-cli

cpnm i react-native-cli -g

初始化

react-native init 目录名

配置环境变量

Path 添加Android\sdk\platform-tools和tools
执行adb 有东西弹出(需要安装安卓sdk)表示正常

打开SDKManager

安装 Android SDK build-tools .01勾上安装

执行

进入刚才创建的目录

react-native run-android

Mac配置

安装homebrew

brew update 更新
brew doctor 检测问题
xcode-select –install 装select一些依赖
brew install watchman
brew install flow

安装并配置andriod虚拟机

安装JDK 在甲骨文官网下载
brew install androud-sdk 安装SDK
配置环境变量
cd~ vi~/.bash_profile
jdk也要配置
export ANDROID_HOME=/usr/local/opt/android-sdk
找到sdkmanage 安装依赖包
extras 需要装android support Repository
iunter *86 Emulator acceleator 手工安装 鼠标放上去会显示路径

安装react-native-cli

cpnm i react-native-cli -g

初始化

react-native init 目录名

打开文件夹 直接run
command +D 出现控制菜单
command +R 刷新

开始

index.andriod.js
index.ios.js

规范

1
2
3
4
5
6
7
8
9
10
11
12
13
内样式的写法  style={{}} 里面写样式用小驼峰
单位不写px
样式组件
let styles=StyleSheet.creatClass({
	container:{
		//里面写样式小驼峰
	}
})
外面引入style={styles.container}

  <View> 用来布局  <Text> 显示文本  <Image> 显示图片 样式可以继承
写多个样式  style={[styles.a,styles.b]} 
flex布局默认是column

组件(Component)

官方组件必须用对象解构的方式在react-native引入时引入

helloworld

首先从index.android.js开始

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, { Component } from 'react'; //用数组解构的方式引入 Component 来定义组件
import { AppRegistry, Text, View } from 'react-native'; //引入react-native自带组件AppRegistry(用来注册根组件) Text用来显示文本 View用来布局

class hello extends Component{
  render(){
    return(
    <View>
      <Text>hello</Text>
    </View>
      )
  }
  }

AppRegistry.registerComponent('react_1', () => hello); //第一个参数为项目名 第二个参数为注册的根组件

声明组件

1
class hello extends Component等价于 var hello = React.createClass({})

StyleSheet组件(样式)

StyleSheet.create 的创建是可选的，但提供了一些关键优势。它通过将它们转换为引用一个内部表的纯数字，来确保值是不可变的和不透明的。通过将它放在文件的最后，也确保了它们为应用程序只创建一次，而不是每一个 render 都创建。
所有的属性名称和值是工作在网络中的一个子集。对于布局来说，React Native实现了 Flexbox。
如果不使用图片组件可以直接在行内写样式
例如

1
2
<Text style={{fontSize:40}}></Text> //单个样式写法
<View style={[styles.base, styles.background]} />//多个样式写法

在冲突值的情况下，从最右边元素的值将会优先，并且 falsy 值如 false，undefined 和 null 将被忽略。一个常见的模式是基于某些条件有条件地添加一个样式。

如果使用StyleSheet组件
在React-native中引入StyleSheet后
首先先声明一个变量用来存储样式的内容

1
2
3
4
5
let styles=Stylesheet.create({
	样式名:{
		key:value
	}
})

图片组件Image

图片必须给宽高不然不显示
如果是本地图片需要先require进来后使用

resizeMode属性

当帧与原始图像尺寸不匹配时用于确定如何调整图像的大小
三个值 (‘cover’, ‘contain’, ‘stretch’)

source属性

可以是base64图片
使用方法

1
soure={{uri:''}}

ScrollView 适合数量较少的滚动

ScrollView适合用来显示数量不多的滚动元素。放置在ScollView中的所有组件都会被渲染
ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动，还能水平滚动（通过horizontal属性来设置

自定义组件

1
2
3
4
5
6
7
class ContentText extends React.Component{ //定义ContentText组件
	render(){
	return(
		//组件内容	
	)
  }
}

listView 自带懒加载 scroll

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
export default React.createClass({
	getInitialState(){
	let movies=[
	{title:'123'}
	]
	let dataSource = new ListView.DataSource({ //这个D要大写
		rowHasChanged:(row1,row2)=> row1!==row2
		});
	}
	return{
		movies:dataSource.cloneWithRows(movies) //按照集合的每个内容进行遍历
		}      //直接return state的内容
	,
	render(){
	return (
		<View>
			<ListView
			dataSource={this.state.movies} //用来获取ListView的数据
			renderRow={
				movie => <Text styles={styles.itemText}>{movie.title}</Text>
			}//具体内容
			/>
				
			
		</View>
	)
}
})

数据拉取

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const REQUEST_URL='' //url
export default React.createClass({
	getInitialState(){
		this.fetchData)();
		return {
		movies:
	}
	}

fetchData(){
	fetch(REQUEST_URL)
	.then(res=>res.json())
	.then(resData=>{
		this.state.movies.cloneWithRows(resData.subjects) //subjects为要取数据的key
	})
}