本文来自React Native中文网, 个人初学笔记
主要包含：
- AppRegistry 及 注册组件是注意的问题
- 样式的写法，StyleSheet, StyleSheet.create
- 宽高 width, height, flexbox布局
- TextInput | ScrollView | ListView 等RN组件初步使用
- Navigator 进行路由切换场景
AppRegistry
这个模块告诉React Native（简称RN）哪一个组件被注册为整个应用的根容器。一般整个应用里面 AppRegistry.registerComponent方法只会调用一次
import { AppRegistry, Text } from 'react-native'
// HelloWorld 组件
AppRegistry.registerComponent(
'HelloWorld',
() => HelloWorld
)
注意 项目名 和 注册组件不匹配的情况
比如我的项目为：
react-native init AwesomeApp
但是在index.android.js中注册了其它的组件 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)
这个时候会出现 react-native application has not been registered 错误，
我们应该在index.android.js中写为：
AppRegistry.registerComponent('AwesomeApp', () => Bananas);
具体 组件未注册
样式 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',
}
})
当然我们也可以通过style，直接添加样式,也是采用驼峰法
<Text style={{color: 'red', fontSize: 20}}>Hello</Text>
宽高 width && height
RN 中的尺寸都是无单位的， 表示的是与设备像素密度无关的逻辑像素点。
给组件设置尺寸最简单的是指定固定的 width height。这是比较常见的模式，比如不同的尺寸屏幕显示固定的大小
class FixedDimensionsBasics extends Component {
render() {
return (
<View>
<View style={{ width: 50, height: 100, backgroundColor: 'skyblue'}} />
</View>
)
}
}
弹性宽高（flex）
可以使用 flex 动态的扩展或缩放。
flex: 1 常用来指定某个组件扩张以撑满剩余的空间， flex值的大小决定，扩张剩余空间的比例大小
组件能扩张或缩放的前提是：父容器尺寸不为０。如果父容器既没有固定width和height，也没有设定 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个子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>
# 这种情况， 不会显示任何东西
指定 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个子View将按照 '1:2:3' 的比例分割 父容器300的高
Flexbox
这个属性和web CSS中基本差不多，RN中使用 flexDirection | alignItems | justifyContent | flex等,以下是差异点：
- RN中 flexDirection 默认值是 column 而不是 row
- RN中 flex 只能指定一个数字值， 而不是web css 中的3个值
其余的基本相似
<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
允许用户输入文本的基础组件
属性：
- onChangeText： 相当于 React中的 onChange 事件，当文本变化时被调用
- onSubmitEditing: 当文本被提交(用户调用软键盘的提交键)时调用
比如：
# text 为一个状态， 默认为''
<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
一个通用的可滚动的容器。可以在其中放多个组件和视图，这些组件可以不是同类型。ScrollView 还可以水平滚动 （通过设置 horizontal 属性）
ScrollView 适合用来显示数量不多的滚动元素， 如果需要显示较长的滚动列表，可以使用功能类似，性能更好的ListView
import { ScrollView } from 'react-native';
<ScrollView>
<Text style={{fontSize: 40, color: "green"}}>滚动吧</Text>
<Image source={require('./imgs/1.jpg')} style={width: 100, height: 100} />
// ...
<ScrollView>
ListView
显示垂直滚动列表，元素之间的结构近似而仅数据不同，更适合于长列表数据，且元素个数可增删。常用于从服务端取回列表数据然后显示。类似于 ul > li 。
ListView特点：
- 和ScrollList不同的是， ListView 并不立即渲染所有元素，而是优先渲染屏幕上的可见的元素。
- ListView组件必须有3个属性： dataSource(列表数据源)， renderRow(逐个解析数据源中的数据， 然后返回一个设定好的格式)， rowHasChanged(函数)
示例：
class ListViewBasics extends Component {
constructor(props) {
// 初始化模拟数据
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
这个是导航器组件，利用 场景（Scene） 的概念
属性：
- initialRoute: 初始路由
- renderScence: 渲染场景，这里面接一个函数(route, navigator) => MyScene
场景的推入导航栈
上面 renderScence 中有 navigator 作为参数，可以使用下面方法进行前进或后退
// 进入导航栈
navigator.push({
title: 'Next Scene',
index: 1,
})
navigator.pop() // 出导航栈
完整示例：
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>点我进入下一场景</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this.props.onBack}>
<Text>点我返回上一场景</Text>
</TouchableHighlight>
</View>
)
}
}
class SimpleNavigationApp extends Component {
render() {
return (
<Navigator
initialRoute={{title: 'My Initial Scene', index: 0}}
# 此处的route会使用上面的initialRoute作为初始值
renderScene={(route, navigator) =>
<MyScene
title={route.title}
# 前进
onForward={ () => {
const nextIndex = route.index + 1,
navigator.push({
title: 'Scene ' + nextIndex,
index: nextIndex
});
}}
# 后退
onBack={() => {
if (route.index > 0) {
navigator.pop();
}
}}
/>
}
/>
)
}
}