安装

Win@H_404_3@

iOS@H_404_3@

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@H_404_3@

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@H_404_3@

属性值：row,column
flexDirecation在React-Native只有两个属性: row(横向伸缩) ，column(纵向伸缩)

flexWrap@H_404_3@

flexWrap属性值：
wrap,nowrap

alignItems@H_404_3@

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

alignSelf@H_404_3@

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

justifyContent@H_404_3@

justifyContent纵向对其方式：
flex-strat,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
    }
});

定位@H_404_3@

position
top
left
bottom
right

布局@H_404_3@

RN是border-Box模型

width
height
margin
padding
border
flex系列

marginVertical  // 上下外留白的简写，如果marginTop和marginBottom一样。
marginHorizontal // 左右外留白的简写
paddingVertial
paddingHorizontal

背景@H_404_3@

backgroundColor
backgroundVisibility

文字@H_404_3@

color
fontFamily
fontSize
fontStyle
fontWeight
textAlign
textDecorationColor
textDecorationLine
textDecorationStyle
letterSpacing
lineHeight

阴影@H_404_3@

shadowColor 阴影色iOS only
shadowOffset 阴影距离iOS only
shadowOpaicty 阴影透明度iOS only
shadowRadius 阴影半径 iOS only
elevation 仰角 android only // 这是属性影响着元素的z-index，就是绝对定位时覆盖顺序，也会在元素上产生一个阴影。

其它@H_404_3@

opacity
overflow
resizeMode
rotation
scaleX
scaleY
transform
transformMatrix
translateX
translateY
writingDirection

文本输入@H_404_3@

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语法

生命周期@H_404_3@

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

样式解析@H_404_3@

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]}>

设置属性默认值@H_404_3@

Recat.createClass({
    getDefaultProps() {
        return {
            sign: '正在加载...'
        }
    }
});

事件绑定@H_404_3@

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的实例.

获取元素@H_404_3@

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>
        );
    }
}

全局对象@H_404_3@

在RN中，引用全局对象可以使用window或者global，它们都指向一个对象 -- DedicatedWorkerGlobalScope,其中有jscore提供的方法，也有RN注入的方法.

props@H_404_3@

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@H_404_3@

在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});
}

redux状态