React-Native

安装

iOS启动注意

1. 在xcode项目代码中AppDelegate.m会标识入口文件。例如：jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"]

2. 闪屏界面在哪修改?

   xcode项目中找到LaunchScreen.xib文件，就是启动界面。手动添加组件或修改文本即可。

3. 文本编辑器打开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, column
flexDirecation在React-Native只有两个属性: row(横向伸缩) ，column(纵向伸缩)

flexWrap

flexWrap属性值：
wrap,nowrap

alignItems

alignItems属性值：
flex-start,flex-end,center,stretch

alignSelf

alignSelf横向对其方式：
flex-start,flex-end,center, stretch

justifyContent

justifyContent纵向对其方式：
flex-strat,flex-end,center,space-between,space-around

样式

和普通的css不一样的地方

1. RN样式的属性名，需要使用驼峰式

2. 应用于组件的style属性上的样式，可以不止一个，可以使用多个，以逗号分隔。如 style={styles.a, styles.b}

3. 可以在样式中使用变量.
   例如：需要一个元素的宽度等于屏幕的宽度。

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布局的一些坑

1. 不存在zIndex，后面的元素覆盖前面的元素。

2. 内层元素覆盖外层元素。

3. borderRadius的设置，需要考虑到内层元素的位置。

4. flex为0,系统不会自动计算宽高。

5. View内部的元素不要超出父级的范围，iOS问题不大，andriod上就什么超出的都看不到了。

6. lineHeight可以用，不过不要写成小数，否则andriod上会直接崩溃。

7. RN的样式不存在继承的情况，所以基本上的每个节点都要写style。 （Text相关样式除外，Text嵌套的话，其文字属性也会应用于子元素）

8. 如果Text的父级元素设置了背景颜色，那么iOS下Text的背景颜色也是父级的背景颜色，那么自己写Text重置下样式，那么就遇到了再改。

9. RN的字号是没有设置单位的，所以会随着系统设置的字体大小而变化。

10. RN的样式中的width/height的单位是DP

11. RN没有宽高100%的设置，所以如果需要让元素撑满屏幕 ：<View style={{width: Dimensions.get('window').width,height: Dimensions.get('window').height}} />

react语法

jsx语法

生命周期

componentWillMount：组件创建之前
getInitialState：初始化状态
render：渲染视图
componentDidMount：渲染视图完成后
componentWillUnmount：组件被卸载之前

样式解析

1. 普通内联样式:{{}},第一层｛｝是表达式，第二层｛｝是js对象；

   <View style={{fontSize:40, width:80,}}> </View>

2. 调用样式表:{样式类.属性}

   <View style={styles.container}></View>

3. 样式表和内联样式共存:{[]}

   <View style={[styles.container, {fontSize:40, width:80}]}>

4. 多个样式表:{[样式类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});
}