React-Native

时间 2020-04-19

标签 react native 栏目 React 繁體版

原文原文链接

安装

iOS启动注意css

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

闪屏界面在哪修改?android

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

文本编辑器打开index.ios.js文件，是js代码的入口文件，全部的代码编写从这开始，能够定义本身的模块和引入第三方模块。ios

原生知识点

andriod的activity跳转react-native

两个activity之间的跳转。
android中有一个比较重要的组件--activity，是用于显示View的。
好比：利用react建立简单的app，当一开打开app的时候，其实就进入了一个主的activity，由其渲染主界面（activity能够简单理解为浏览器的tab）。xcode

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加入到WindowManagerapp

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不同的地方

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的单位是DP
RN没有宽高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});
}