React native 版本0.57.5
良心提示：個(gè)人筆記整理 僅供參考
內(nèi)容簡(jiǎn)介：RN基礎(chǔ)語(yǔ)法、ES2015(ES6)語(yǔ)法、JSX語(yǔ)法
一.啟動(dòng)項(xiàng)目
- $react-native run-android
Hello World.png
二、代碼分析
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
- import語(yǔ)句用于導(dǎo)入由另一個(gè)模塊導(dǎo)出的綁定（組件）。查看詳細(xì)
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
- 此聲明創(chuàng)建一個(gè)常量，其作用域可以是全局或本地聲明的塊,并且常量的值
不能通過(guò)重新賦值來(lái)改變也不能重新聲明。 - Platform.select( )根據(jù)不同平臺(tái)使用不同的樣式或者組件
type Props = {};
export default class App extends Component<Props> {
}
- 創(chuàng)建一個(gè)名為App的組件并默認(rèn)導(dǎo)出
render() {}
- 必須的在render()方法中返回一些用于渲染結(jié)構(gòu)的 JSX 語(yǔ)句。
return(
<View><Text>Hello world!</Text></View>
{/*注釋*/}
)
- JSX語(yǔ)句使用前必須先
import
<View> 相當(dāng)于HTML<div>
<Text>用來(lái)顯示文本
三、Props（屬性）
- 大多數(shù)組件在創(chuàng)建時(shí)就可以使用各種參數(shù)來(lái)進(jìn)行定制。用于定制的這些參數(shù)就稱為props（屬性）。
- 以常見的基礎(chǔ)組件Image為例，在創(chuàng)建一個(gè)圖片時(shí)，可以傳入一個(gè)名為source的 prop 來(lái)指定要顯示的圖片的地址，以及使用名為style的 prop 來(lái)控制其尺寸。
import React, { Component } from 'react';
import { Image } from 'react-native';
export default class PropsTest extends Component {
render() {
let pic = {
uri: 'https://www.baidu.com/img/baidu_jgylogo3.gif'
};
return (
<Image source={pic} style={{width: 193, height: 110}} />
);
}
}
- 請(qǐng)注意
{pic}外圍有一層括號(hào)，我們需要用括號(hào)來(lái)把pic這個(gè)變量嵌入到 JSX 語(yǔ)句中。括號(hào)的意思是括號(hào)內(nèi)部為一個(gè) js 變量或表達(dá)式，需要執(zhí)行后取值。因此我們可以把任意合法的 JavaScript 表達(dá)式通過(guò)括號(hào)嵌入到 JSX 語(yǔ)句中。
