安装
Win
iOS
iOS启动注意
在xcode项目代码中AppDelegate.m会标识入口文件。例如：
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"]-
闪屏界面在哪修改?
xcode项目中找到LaunchScreen.xib文件，就是启动界面。手动添加组件或修改文本即可。
文本编辑器打开index.ios.js文件，是js代码的入口文件，所有的代码编写从这开始，可以定义自己的模块和引入第三方模块。
原生知识点
andriod的activity跳转
两个activity之间的跳转。
android中有一个比较重要的组件--activity，是用于显示View的。
比如：利用react创建简单的app，当一开打开app的时候，其实就进入了一个主的activity，由其渲染主界面（activity可以简单理解为浏览器的tab）。
andriod系统根据生命周期的不同阶段唤起对应的回调函数来执行代码。系统存在启动鱼销毁一个activity的一条有序的回调函数。
Acitivity: Activity包含一个Window，改window在Acitivity的attach方法中调用PolicyManager.makeNewWindow创建。
View：最基本的UI组件，表示屏幕上的一个矩形区域。
DecorView：是Window中的View的RootView，设置窗口属性。
Window：表示顶层窗口，管理界面的显示和事件的相应。每个Activity均会创建一个PhoneWinodw对象，是Activity和整个View系统交互的接口。
WIndowManager: 一个interface，继承子ViewManager.所在应用进程的窗口管理器；有一个implementtation WindowManagerImpl；主要用来管理窗口的一些状态，属性，view增加，删除，更新，窗口顺序，消息收集和处理等。
ViewRoot：通过IWindowSession 接口与全局窗口管理器进行交互：界面控制和消息响应。
ActivityThread：应用程序的主线程，其中会创建关联当前Activity于Window；创建WindowManager实现雷实例，把当前DecoView加入到WindowManager
flex布局
react-native中的flex布局应用的6的属性
flex
var Text = React.createClass({
render() {
return (
<View style={styles.style_0}>
<View style={styles.style_1}></View>
<View style={styles.style_1}></View>
<View style={{flex: 10}}></View>
</View>
);
}
});
var styles = StyleSheet.create({
style_0: {
flex: 1,},style_1: {
flex: 5,height: 40,borderWidth: 1,borderColor: 'red'
}
});
当一个组件(元素)，定义了flex属性时，表示改元素是可伸缩的。
flex的属性值是大于0的时候伸缩，其小余和等于0的时候不伸缩，例如：flex: 0,flex: -1.
代码中：最外层的View是可伸缩的，因为没有兄弟节点和它占空间，占满全屏。里层是3个View，可以看到三个View的flex属性加起来是5+5+10 = 20.所以第一个View和第二个View分别占1/4伸缩空间，最后一个View占据1/2空间。
flexDireaction
属性值：row,columnflexDirecation在React-Native只有两个属性: row(横向伸缩) ，column(纵向伸缩)
flexWrap
flexWrap属性值：wrap,nowrap
alignItems
alignItems属性值：flex-start,flex-end,center,stretch
alignSelf
alignSelf横向对其方式：flex-start,stretch
justifyContent
justifyContent纵向对其方式：flex-strat,space-between,space-around
样式
和普通的css不一样的地方
RN样式的属性名，需要使用驼峰式
应用于组件的style属性上的样式，可以不止一个，可以使用多个，以逗号分隔。如
style={styles.a,styles.b}可以在样式中使用变量.
例如：需要一个元素的宽度等于屏幕的宽度。
const styles = StyleSheet.create({
container: {
flex: 1,flexDireaction: 'column',width: Dimensions.get('window').width
}
});
定位
position top left bottom right
布局
RN是border-Box模型
width height margin padding border flex系列 marginVertical // 上下外留白的简写，如果marginTop和marginBottom一样。 marginHorizontal // 左右外留白的简写 paddingVertial paddingHorizontal
背景
backgroundColor backgroundVisibility
文字
color fontFamily fontSize fontStyle fontWeight textAlign textDecorationColor textDecorationLine textDecorationStyle letterSpacing lineHeight
阴影
shadowColor 阴影色iOS only shadowOffset 阴影距离iOS only shadowOpaicty 阴影透明度iOS only shadowRadius 阴影半径 iOS only elevation 仰角 android only // 这是属性影响着元素的z-index，就是绝对定位时覆盖顺序，也会在元素上产生一个阴影。
其它
opacity overflow resizeMode rotation scaleX scaleY transform transformMatrix translateX translateY writingDirection
文本输入
constructor(props) {
super(props);
this.state = { text: '' }
}
render() {
return (
<View style={{padding: 10}}>
<TextInput style={{height: 40}} placeholder="transilate!" onChangeTex={(textCont) => this.setStatet({text: textCount})} />
<Text style={{padding: 10,fontSize: 40}}>
{this.state.text.split(' ').map((word) => word && 'aaa').join()}
</Text>
</View>
);
}
react-native布局的一些坑
不存在zIndex，后面的元素覆盖前面的元素。
内层元素覆盖外层元素。
borderRadius的设置，需要考虑到内层元素的位置。
flex为0,系统不会自动计算宽高。
View内部的元素不要超出父级的范围，iOS问题不大，andriod上就什么超出的都看不到了。
lineHeight可以用，不过不要写成小数，否则andriod上会直接崩溃。
RN的样式不存在继承的情况，所以基本上的每个节点都要写style。 （Text相关样式除外，Text嵌套的话，其文字属性也会应用于子元素）
如果Text的父级元素设置了背景颜色，那么iOS下Text的背景颜色也是父级的背景颜色，那么自己写Text重置下样式，那么就遇到了再改。
RN的字号是没有设置单位的，所以会随着系统设置的字体大小而变化。
RN的样式中的width/height的单位是
DPRN没有宽高100%的设置，所以如果需要让元素撑满屏幕 ：
<View style={{width: Dimensions.get('window').width,height: Dimensions.get('window').height}} />
react语法
jsx语法
生命周期
componentWillMount：组件创建之前
getInitialState：初始化状态
render：渲染视图
componentDidMount：渲染视图完成后
componentWillUnmount：组件被卸载之前
样式解析
-
普通内联样式:{{}},第一层｛｝是表达式，第二层｛｝是js对象；
<View style={{fontSize:40,width:80,}}> </View> -
<View style={styles.container}></View> -
样式表和内联样式共存:{[]}
<View style={[styles.container,{fontSize:40,width:80}]}> -
多个样式表:{[样式类1， 样式类2]}
<View style={[styles.container,styles.color]}>
设置属性默认值
Recat.createClass({
getDefaultProps() {
return {
sign: '正在加载...'
}
}
});
事件绑定
class TestReact extends Component {
construcotr(props) {
super(props);
this.state = {
name: 'a'
}
}
changeState() {
this.setState({
name: 'b'
});
}
render() {
return (
<View onToucheEnd={this.changeState}>
<Text>当前状态是：{this.state.name}</Text>
</View>
);
}
}
把TouchEnd事件绑定在最外层View上。
注意：事件触发函数的上下文，默认就是本组件。 changeState中的this，就是指代的就是TestReact的实例.
获取元素
refs属性
class TestReact extends Component {
getPos() {
this.res.position.measure((fx,fy,width,height,px,py) => {
console.log('位置：','x:',fx,'y:',fy);
});
}
render() {
return (
<View onTouechEnd={this.getPos}>
<Text ref={"position"}>位置</Text>
</View>
);
}
}
全局对象
在RN中，引用全局对象可以使用window或者global，它们都指向一个对象 -- DedicatedWorkerGlobalScope,其中有jscore提供的方法，也有RN注入的方法.
props
Props属性
设置：在应用组件上传递key=val
获取：this.props.key
class Test exntds Compontent {
render() {
return (
<View>
<Text>HELLO {this.props.name}</Text>
</View>
);
}
}
export default class FirstApp extned Componet {
render() {
return {
<View style="{{alignItems: 'center'}}">
<Test name='react' />
<Test name='react-native' />
<Test name='android' />
</View>
}
}
}
state
在constructor中初始化state，然后再需要修改时调用setState方法。
设置：this.setState({key: val})
获取：this.state.key
constructor(props) {
super(props);
this.state = {
count: 0
}
}
doUpdateCount() {
this.setState({count: this.state.count + 1});
}
