React-Native

2019年8月31日 160次阅读 来源: alogy

装置

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

《React-Native》

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});
}
    原文作者：alogy
    原文地址: https://segmentfault.com/a/1190000009186481
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞