React Native Component

时间 2019-11-07

标签 react native component 栏目 React 繁體版

原文原文链接

UI显示流程：javascript

Android：经过layout布局决定UI效果，其中样式文件与界面元素写在布局中更新的功能写在代码中html

备注：真正的状态机制是只数据状态周期，有传递性，也能由于数据改变了影响UI。在Android是没有这种设计的。java

Reative Native：Virtual Dom 树。 Vue用于PC端，重绘整个Dom树，React Native避免了从新绘制DOM，经过DOM映射成原生空间显示在屏幕上。node

总结：Reat是一个专一于UI部分框架，作UI架构很牛逼，毕竟会存在DOM与原生控件的映射，不免性能会有损耗，可是相对于html仍是高出不少。react

Flutter：基于dart描述的UI效果，直接经过Skia图像处理引擎渲染到界面。没有虚拟DOM，也没有原生映射，性能对于原生会高一些。（分有状态的、无状态的。）git

总结：性能虽高，热重载技术，设计架构也都是Google出产。github

Android无法实现热重载：算法

.java文件 ————.class文件 —————.dex文件---------生成apk —————安装到手机npm

Java文件编译成Class，而后被dex工具编译成dex，最终打包成APK文件，随后经过adb命令装到手机中Java文件发生变化，上述流程须要从新来一遍，安装到手机中，才能看到效果react-native

Class加载过程：懒加载，是不支持热更新的最根本缘由。

RN的编译流程：

JS文件————react-native jar包------消息队列--------diff算法检测到UI差别———DOM树更新------从新渲染

Flutter编译流程：

.dart文件--------react-native jar包-------Skia图像处理引擎--------引擎直接加载Dart描述的UI-------从新渲染

万物皆组件：render()方法

初始化、 getDefaultProps、 getInitState、componentWillMount（onCreate）、render、 componentDidmount

不会卡顿：把渲染分发到每个组件中去了。

export default class App extends Component<Props> {
    constructor(props) {
      super(props);
      this.state = {};
        console.log("0 constructor")
    }

    componentWillMount(){
        console.log("1 componentWillMount")
    }

    componentDidMount(){
        console.log("2 componentDidMount")
    }

    shouldComponentUpdate(nextProps, nextState) {
        console.log("3 componentDidMount")
        return true
    }
    componentWillReceiveProps(nextProps) {
        console.log("4 componentWillReceiveProps")
    }
    componentWillUnmount() {
        console.log("5 componentWillUnmount")
    }
    componentWillUpdate(){
        console.log("6 componentWillUpdate")
    }
    componentDidUpdate() {
        console.log("7 componentDidUpdate")
    }
    render() {
        return (
            <View style={styles.container}> <Text style={styles.welcome}>Welcome to React Native!</Text> <Text style={styles.instructions}>To get started, edit App.js</Text> <Text style={styles.instructions}>{instructions}</Text> </View>
        );
    }
}
复制代码

二、封装对象（component）、样式（styles）

运行时：杀掉node进程。

props：初始属性（数据）不可改变（rn 入口父组件、影响当前Props）

传递数据而生

state：内置对象，不能直接给它赋值。核心，当前组件相关，数据状态集合。

数据 + 控件。

状态包含 props、state状态。

Flex布局

Flex布局：概念弹性盒子布局,优点

主轴，交叉轴。row， clumon;

flex-direction: column, row, row-reverse, column-reverse

flex：1（权重，占比）

justfyContent：flex-start, center, flex-end, space-around, space-between （相似于layout_gravity）

alignments:

语法

箭头函数，内部类啥都没有，this不表示内部类，而是表示外部的Class。

开发RN时，箭头函数不要写 function()=>{

}

props使用

父组件对子组件进行传递,弱类型语言：

react ———》运行字符串——》number

props 做为一个变量对象

export default class PropsTest extends Component{
    constructor(props) {
      super(props);
      this.state = {};
    }

    static defaultProps={
        name:"Tina"
    }

    static propTypes={
        name:PropTypes.string,
        age:PropTypes.number,
        sex:PropTypes.string.isRequired
    }
    render(){
        return(<View> <Text>姓名：{this.props.name}</Text> <Text>age: {this.props.age}</Text> <Text>sex: {this.props.sex}</Text> </View>)
    }   
}
export default class PropsTest extends Component{
    constructor(props) {
      super(props);
      this.state = {};
    }
    static defaultProps={
        name:"Tina"
    }
    static propTypes={
        name:PropTypes.string,
        age:PropTypes.number,
        sex:PropTypes.string.isRequired
    }
    render(){
        return(<View> <Text>姓名：{this.props.name}</Text> <Text>age: {this.props.age}</Text> <Text>sex: {this.props.sex}</Text> </View>)
    }    
}
复制代码

ref详解

相似于Android中的findViewByid机制

react-navigation

安装navigation

tab-navigator

官方并无 TabBar ，咱们使用一个第三方 react-native-tab-navigator

在项目根目录执行命令

npm install react-native-tab-navigator --save
复制代码

安装完成后在 App.js 加入 TabNavigator:

www.jianshu.com/p/eeed3d8e7…

导入navigation 库后一直出错，原来是看的旧版的中文文档，看英文文档修正：

reactnavigation.org/docs/en/get…

yarn add react-native-gesture-handler
# or with npm
# npm install --save react-native-gesture-handler
复制代码

而后再link

react-native link react-native-gesture-handler
复制代码

Navigation的跳转

this.props.navigation.navigate('RouteName')

this.props.navigation.push('Home')

this.props.navigation.goback()
复制代码

TabNavigator:

import React from "react";
import { View, Text, Button, StyleSheet } from "react-native";
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from "react-navigation";

class HomeScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
                <Text>Home Screen</Text>
                <Button
                    title="Go to Details"
                    onPress={() => this.props.navigation.navigate('Details')}
                />
            </View>
        );
    }
}

class DetailsScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
                <Text>Details Screen</Text>

                <Button style={styles.btn}
                    title="Go to Details... again"
                    onPress={() => this.props.navigation.push('Details')}
                />
                <Button style={styles.btn}
                    title="Go to Home"
                    onPress={() => this.props.navigation.navigate('Home')}
                />
                <Button style={styles.btn}
                    title="Go back"
                    onPress={() => this.props.navigation.goBack()}
                />

            </View>
        );
    }
}


class SettingsScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
                <Text>Setting Screen</Text>
                <Button
                    title="Go to ProfileScreen"
                    onPress={() => this.props.navigation.navigate('Details')}
                />
            </View>
        );
    }
}


class ProfileScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
                <Text>Details Screen</Text>

                <Button style={styles.btn}
                        title="Go to ProfileScreen...again"
                        onPress={() => this.props.navigation.push('Details')}
                />
            </View>
        );
    }
}

const HomeStack = createStackNavigator({
    Home: HomeScreen,
    Details: DetailsScreen
},{
    initialRouteName:"Home"
});

const SettingsStack = createStackNavigator({
    Settings: SettingsScreen,
    Profile: ProfileScreen,
});

const TabNavigator = createBottomTabNavigator(
    {
        Home: HomeStack,
        Settings: SettingsStack,
    }
);
const AppContainer = createAppContainer(TabNavigator);

export default class App extends React.Component {
    render() {
        return <AppContainer />;
    }
}

const styles = StyleSheet.create({
    btn:{
        marginTop:20,
        margin:50
    }
})
复制代码