react-native入門(二)----建立一個應用和組件

準備工做

//進入到想建立的目錄下，執行命令
react-native init Together
複製代碼

建立完畢以後使用編譯器打開Together目錄(webStrom或者vcCode都行），裏面入口文件爲index.js，實際UI代理在App.js中，我用的webStorm查看的還行

聲明一個常量或者變量

後面介紹UI組件基本結構會介紹

let a = 10
var a = 10 //實際使用並沒有區別
複製代碼

聲明一個方法

//裏面的this指向調用他的組件，實際使用中不推薦，網絡請求和UI組件不要緊的可使用
test1 () {
    this.test2() //此時的this不是當前組件，若是想繼續調用當前組件其餘方法，使用後面的聲明方式
}
//推薦使用，裏面的this會指向當前控制器組件自己，實際使用中推薦
test2  = ()=> {
    this.test1()
}
//和下面同樣，異步執行一個方法，能夠理解爲加入一個任務到異步隊列中並執行
async test3 () {
    let result = await request.fetch(params) //執行一個網絡請求同步執行，阻塞當前線程直到請求完畢
    console.log(result)
}
同上，this指向當前控制器組件自己
async test4 = ()=> {
    
}
複製代碼

建立一個UI組件

目錄在page下，page與app.js並集（若想在app.js中引用 import Student1 from "./page/Student1"）

有些編譯器可能會默認建立，沒有的能夠按照下面的來

import { View, TouchableOpacity,Text} from 'react-native'
import React, { Component } from 'react'

export defalut class Student1 extends Component {
    //構造方法
    constructor (props) {
        super(props)
        let a = {'key1': 1, 'key2': 2}
        //狀態機state，只有在裏面的變量纔會渲染到UI上面
        this.state = {
            ...a, //展開集合
            text: name,
            text2: ''
        }
    }
    
    //UI渲染樹
    render () {
        let text3 = this.state.text3 //這裏能夠建立臨時變量，若是對象複雜須要的話
        return (
        <View>
            <Text style={styles.orderNumStyle}>個人名字叫{this.state.text}</Text>
            <TouchableOpacity 
                style={{color: 'red'}}
                onPress={()=>{
                    //點擊事件，還能夠這麼快捷寫哈,view是沒有text和點擊功能的
                    //注意提取和不提取的樣式哪裏不一樣呀
                }}>
                <Text>個人名字叫{this.state.text2}</Text>
            </TouchableOpacity> 
            
            {
                test3 ?
                <Text style={styles.orderNumStyle}>個人名字叫{test3}</Text> : null
            }
            
            {
                this.renderTestItem()//獲取外面建立的UI
            }
            
        </View>
        )
    }
    
    renderTestItem = ()=> {
        return (
        <View>
            <Text style={styles.orderNumStyle}>個人名字叫{this.state.text}</Text>
        </View>
        )
    }
    
    //UI組件初次渲染完畢後的回調，類似於ios的ViewDidLoad,能夠在這裏開始網絡請求了
    componentDidMount () {
        this.requestUserInfo()
    }
    
    //這裏面全部聲明的方法均爲public
    async requestUseInfo = ()=> {
        //let result = await request.fetch(param)
        //若是想更新UI樹上的組件，必需要使用setState方法來更新text才能夠更新UI，更新後，UI樹會自動根據狀態機的內容，進行內容替換並渲染，此過程爲異步
        this.setState({
            text: "123123123"
        })
        //注意: this.state.text不會渲染UI樹， //this.setState({})執行後也不會立刻把state裏面的內容賦值
    }

}

//UI的控件樣式,下面多弄點樣式
const styles = StyleSheet.create({
        orderNumStyle: {
            color: '#9D9EA3FF',
            fontSize: px2dp(24),
        },
        btnTextStyle: {
            color: '#016BFF',
        },
        btnBorderStyle: {
            borderRadius: px2dp(3),
            borderWidth: px2dp(2),
            borderColor: '#016BFF',
            backgroundColor: '#E8F2FF',
            height: px2dp(50),
            alignItems: 'center',
            justifyContent: 'center',
            paddingHorizontal: px2dp(14),
        },
    })
複製代碼

能夠嘗試運行下項目哈，控制檯輸入：react-native run-ios 或者使用xcode或者androidstudio打開嘗試

注：上面的項目運行不成功，運行默認的哈，上面的僅僅是語法參考

上面的組件是我純打出來的小功能，有點小問題能夠提示下更正哈,能夠經過這種大括號的方式來動態調整UI的顯隱（test3的示例），注：裏面有很多細節哈~,

直接複製過去可能會不成功哈，小知識點要記住哈

結尾：

項目中用到的UI佈局大多數是flexBox佈局，後面會介紹到，有什麼問題歡迎留言哈