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
    }
})
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。