本文來自React Native中文網(wǎng), 個(gè)人初學(xué)筆記
主要包含：
- AppRegistry 及 注冊(cè)組件是注意的問題
- 樣式的寫法急鳄，StyleSheet, StyleSheet.create
- 寬高 width, height, flexbox布局
- TextInput | ScrollView | ListView 等RN組件初步使用
- Navigator 進(jìn)行路由切換場(chǎng)景
AppRegistry
這個(gè)模塊告訴React Native（簡(jiǎn)稱RN）哪一個(gè)組件被注冊(cè)為整個(gè)應(yīng)用的根容器分衫。一般整個(gè)應(yīng)用里面 AppRegistry.registerComponent方法只會(huì)調(diào)用一次
import { AppRegistry, Text } from 'react-native'
// HelloWorld 組件
AppRegistry.registerComponent(
'HelloWorld',
() => HelloWorld
)
注意 項(xiàng)目名 和 注冊(cè)組件不匹配的情況
比如我的項(xiàng)目為：
react-native init AwesomeApp
但是在index.android.js中注冊(cè)了其它的組件 Bananas:
import React, { Component } from 'react';
import { AppRegistry, Image, Text, View } from 'react-native';
export default class Bananas extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
}
return (
<View>
<Image source={pic} style={{ width: 193, height: 110}} />
<Text>Hello</Text>
</View>
);
}
}
在 index.android.js 中寫成了：
AppRegistry.registerComponent('Bananas', () => Bananas)
這個(gè)時(shí)候會(huì)出現(xiàn) react-native application has not been registered 錯(cuò)誤，
我們應(yīng)該在index.android.js中寫為：
AppRegistry.registerComponent('AwesomeApp', () => Bananas);
具體 組件未注冊(cè)
樣式 StyleSheet
RN中樣式采用駝峰命名法， 比如'background-color' 寫為 'backgroundColor'
可以通過引入 StyleSheet, 通過 StyleSheet.create 來幾種定義組件的樣式
import { StyleSheet, Text, View } from 'react-native';
class LotsOfStyles extends Component {
render() {
return (
<View>
<Text style={styles.redText}>just red</Text>
</View>
)
}
}
# 集中定義樣式
const styles = StyleSheet.create({
redText: {
fontSize: 30, // 注意這里沒有單位
color: 'red',
fontWeight: 'bold',
}
})
當(dāng)然我們也可以通過style，直接添加樣式,也是采用駝峰法
<Text style={{color: 'red', fontSize: 20}}>Hello</Text>
寬高 width && height
RN 中的尺寸都是無單位的， 表示的是與設(shè)備像素密度無關(guān)的邏輯像素點(diǎn)傅瞻。
給組件設(shè)置尺寸最簡(jiǎn)單的是指定固定的 width height。這是比較常見的模式盲憎，比如不同的尺寸屏幕顯示固定的大小
class FixedDimensionsBasics extends Component {
render() {
return (
<View>
<View style={{ width: 50, height: 100, backgroundColor: 'skyblue'}} />
</View>
)
}
}
彈性寬高（flex）
可以使用 flex 動(dòng)態(tài)的擴(kuò)展或縮放俭正。
flex: 1 常用來指定某個(gè)組件擴(kuò)張以撐滿剩余的空間， flex值的大小決定焙畔，擴(kuò)張剩余空間的比例大小
組件能擴(kuò)張或縮放的前提是：父容器尺寸不為０。如果父容器既沒有固定width和height串远，也沒有設(shè)定 flex 的值宏多，則父容器尺寸將為0，其子組件如果使用了flex,也無法顯示
class FlexDimensionsBasics extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 1, backgroundColor: 'skyblue'}} />
<View style={{ flex: 2, backgroundColor: 'yellow'}} />
<View style={{ flex: 3, backgroundColor: 'red'}} />
</View>
)
}
}
# 這種情況澡罚， 3個(gè)子View將按照 '1:2:3' 的比例分割 父容器伸但。
如果不指定 flex 和 height:
<View>
<View style={{ flex: 1, backgroundColor: 'skyblue'}} />
<View style={{ flex: 2, backgroundColor: 'yellow'}} />
<View style={{ flex: 3, backgroundColor: 'red'}} />
</View>
# 這種情況， 不會(huì)顯示任何東西
指定 height
<View style={{height: 300}}>
<View style={{ flex: 1, backgroundColor: 'skyblue'}} />
<View style={{ flex: 2, backgroundColor: 'yellow'}} />
<View style={{ flex: 3, backgroundColor: 'red'}} />
</View>
# 這種情況留搔， 3個(gè)子View將按照 '1:2:3' 的比例分割 父容器300的高
Flexbox
這個(gè)屬性和web CSS中基本差不多更胖，RN中使用 flexDirection | alignItems | justifyContent | flex等,以下是差異點(diǎn)：
- RN中 flexDirection 默認(rèn)值是 column 而不是 row
- RN中 flex 只能指定一個(gè)數(shù)字值， 而不是web css 中的3個(gè)值
其余的基本相似
<View style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center'
}}>
<View style={{ width: 50, height: 50, backgroundColor: 'pink' }} />
<View style={{ width: 50, height: 50, backgroundColor: '#34d' }} /
<View style={{ width: 50, height: 50, backgroundColor: '#fa1' }} />
</View>
TextInput
允許用戶輸入文本的基礎(chǔ)組件
屬性：
- onChangeText： 相當(dāng)于 React中的 onChange 事件，當(dāng)文本變化時(shí)被調(diào)用
- onSubmitEditing: 當(dāng)文本被提交(用戶調(diào)用軟鍵盤的提交鍵)時(shí)調(diào)用
比如：
# text 為一個(gè)狀態(tài)却妨， 默認(rèn)為''
<View style={{padding: 10}}>
<TextInput
style={{height: 40}}
placeholder="Type here to translate!"
onChangeText={(text) => this.setState({text})}
/>
<Text style={{padding: 10, fontSize: 42}}>
{this.state.text.split(' ').map((word) => word && '??').join(' ')}
</Text>
</View>
ScrollView
一個(gè)通用的可滾動(dòng)的容器饵逐。可以在其中放多個(gè)組件和視圖彪标，這些組件可以不是同類型倍权。ScrollView 還可以水平滾動(dòng) （通過設(shè)置 horizontal 屬性）
ScrollView 適合用來顯示數(shù)量不多的滾動(dòng)元素， 如果需要顯示較長(zhǎng)的滾動(dòng)列表捞烟，可以使用功能類似薄声，性能更好的ListView
import { ScrollView } from 'react-native';
<ScrollView>
<Text style={{fontSize: 40, color: "green"}}>滾動(dòng)吧</Text>
<Image source={require('./imgs/1.jpg')} style={width: 100, height: 100} />
// ...
<ScrollView>
ListView
顯示垂直滾動(dòng)列表，元素之間的結(jié)構(gòu)近似而僅數(shù)據(jù)不同题画，更適合于長(zhǎng)列表數(shù)據(jù)默辨，且元素個(gè)數(shù)可增刪。常用于從服務(wù)端取回列表數(shù)據(jù)然后顯示苍息。類似于 ul > li 缩幸。
ListView特點(diǎn)：
- 和ScrollList不同的是， ListView 并不立即渲染所有元素档叔，而是優(yōu)先渲染屏幕上的可見的元素桌粉。
- ListView組件必須有3個(gè)屬性： dataSource(列表數(shù)據(jù)源)， renderRow(逐個(gè)解析數(shù)據(jù)源中的數(shù)據(jù)衙四， 然后返回一個(gè)設(shè)定好的格式)铃肯， rowHasChanged(函數(shù))
示例：
class ListViewBasics extends Component {
constructor(props) {
// 初始化模擬數(shù)據(jù)
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
'Kobe', 'Jordan', 'Durant', 'James'
])
};
}
render() {
return (
<View style={{flex: 1, paddingTop: 22}}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
</View>
);
}
}
Navigator
這個(gè)是導(dǎo)航器組件，利用 場(chǎng)景（Scene） 的概念
屬性：
- initialRoute: 初始路由
- renderScence: 渲染場(chǎng)景传蹈，這里面接一個(gè)函數(shù)(route, navigator) => MyScene
場(chǎng)景的推入導(dǎo)航棧
上面 renderScence 中有 navigator 作為參數(shù)押逼，可以使用下面方法進(jìn)行前進(jìn)或后退
// 進(jìn)入導(dǎo)航棧
navigator.push({
title: 'Next Scene',
index: 1,
})
navigator.pop() // 出導(dǎo)航棧
完整示例：
import React, {Component} from 'react'
import {AppRegistry, Navigator, TouchableHighlight, Text, View}
from 'react-native'
class MyScene extends Component {
render() {
return (
<View>
<Text>Current Scene: { this.props.title }</Text>
<TouchableHighlight onPress={this.props.onForward}>
<Text>點(diǎn)我進(jìn)入下一場(chǎng)景</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this.props.onBack}>
<Text>點(diǎn)我返回上一場(chǎng)景</Text>
</TouchableHighlight>
</View>
)
}
}
class SimpleNavigationApp extends Component {
render() {
return (
<Navigator
initialRoute={{title: 'My Initial Scene', index: 0}}
# 此處的route會(huì)使用上面的initialRoute作為初始值
renderScene={(route, navigator) =>
<MyScene
title={route.title}
# 前進(jìn)
onForward={ () => {
const nextIndex = route.index + 1,
navigator.push({
title: 'Scene ' + nextIndex,
index: nextIndex
});
}}
# 后退
onBack={() => {
if (route.index > 0) {
navigator.pop();
}
}}
/>
}
/>
)
}
}