React Native笔记02

flexbox 布局

==============================React 容器属性===================================

dispaly

1
2
dispaly: flex 产生块级伸缩性容器
dispaly: inline-flex 产生行内级伸缩性容器

flex-direction 主轴方向、默认row

1
2
3
4
flex-direction: row 水平
flex-direction: row-reverse 水平、由右到左
flex-direction: column 垂直
flex-direction: column-reverse 垂直、由下到上

flex-wrap 空间不足时,怎么排列、默认nowrap

1
2
3
flex-wrap: nowrap 不允许换行
flex-wrap: wrap 允许换行
flex-wrap: wrap-reverse 允许换行,方向相反

flex-flow 为flex-direction和flex-wrap的缩写版本

1
2
flex-flow: row nowrap
...

justify-contnet 主轴对齐方式

1
2
3
4
5
justify-content: flex-start 默认、起始位置对齐
justify-content: flex-end 结束位置对齐
justify-content: center 中间位置对齐
justify-content: space-between 平均分,第一个在起始位置、最后一个在结束位置
justify-content: space-around 平均分

align-items 交叉轴对齐

1
2
3
4
5
align-items: flex-start 默认、交叉轴起始位置对齐
align-items: flex-end 交叉轴结束位置对齐
align-items: center 交叉轴中间位置对齐
align-items: baseline 基线对齐(item底部对齐)
align_items: stretch 默认、交叉轴方向拉伸

align-content 调整换行后,交叉轴的对齐

1
2
3
4
5
6
align-content: flex-start 默认、交叉轴起始位置对齐
align-content: flex-end 交叉轴结束位置对齐
align-content: center 交叉轴中间位置对齐
align-content: space-between 平均分布
align-content: space-around 平均分布、且两边各有一半空间
align-content: stretch 默认、在交叉轴上伸展以占用剩余空间

==============================React 项目属性===================================

order 排列顺序、数值越小越前、默认为0

1
order: integer (可以负数)

flex-grow 放大比例、默认为0不放大

1
flex-grow: number (增加number)

flex-shrink 收缩能力、默认为1

1
flex-shrink: number (缩为1/number)

flex-basis 剩余空间按比例伸缩

1
2
flex-basis: length (具体px)
flex-basis: auto

flex flex-grow、flex-shrink、flex-basis的3个属性的缩写

1
2
flex: none (0 0 auto)
flex: flex-grow flex-shrink(可选) flex-basis(可选) 默认 0 1 auto

align-self 设置单独的对齐方式、会覆盖默认对齐方式

1
2
3
4
5
6
align-self: auto
align-self: flex-start
align-self: flex-end
align-self: center
align-self: baseline
align-self: stretch

==============================在React Native中使用flexbox======================

alignItems

1
alignItems: flex-start | flex-end | center | stretch

alignSelf

1
alignSelf: auto | flex-start | flex-end | center | stretch

flex

1
flex: number

flexDirection

1
flexDirection: row | column

flexWrap

1
flexWrap: wrap | npWrap

justifyContent

1
justifyCOntent: flex-start | flex-end | center | space-between | space-around

常用组件

1
2
3
4
5
6
7
import {
AppRegistry,
StyleSheet,
Text,
PixelRatio, 设备像素比,1/PixelRatio.get() 可以获取最小线框
View
} from 'react-native';

View

Text

1
2
3
onPess
numberOfLines
onLayout:{y:10, width:300, x:10, height:117}

Navigator

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
initialRoute: 初始化路由
{
name: string
index:
component?: React.ComponentClass<ViewProperties>
id?: string
title?: string
passProps?: Object;
//anything else
[key: string]: any
//Commonly found properties
backButtonTitle?: string
content?: string
message?: string;
index?: number
onRightButtonPress?: () => void
rightButtonTitle?: string
sceneConfig?: SceneConfig
wrapperStyle?: any
}
renderScene: function 跳转视图
configureScene function 用来配置场景动画和手势
initialRouteStack [object] 提供一个路由集合用来初始化
navigationBar node 提供一个在场景切换的时候保持的导航栏
navigator object 提供从父导航器获得的导航器对象。c
sceneStyle 将会应用在每个场景的容器上的样式。
=====================
导航方法
var navigator = this.props.navigator
getCurrentRoutes() - 获取当前栈里的路由,也就是push进来,没有pop掉的那些。
jumpBack() - 跳回之前的路由,当然前提是保留现在的,还可以再跳回来,会给你保留原样。
jumpForward() - 上一个方法不是调到之前的路由了么,用这个跳回来就好了。
jumpTo(route) - 跳转到已有的场景并且不卸载。
push(route) - 跳转到新的场景,并且将场景入栈,你可以稍后跳转过去
pop() - 跳转回去并且卸载掉当前场景
replace(route) - 用一个新的路由替换掉当前场景
replaceAtIndex(route, index) - 替换掉指定序列的路由场景
replacePrevious(route) - 替换掉之前的场景
immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈
popToRoute(route) - pop到路由指定的场景,其他的场景将会卸载。
popToTop() - pop到栈中的第一个场景,卸载掉所有的其他场景。

TextInput

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
autoCapitalize 当用户输入时,用于提示。可选值none、sentences、words、characters
placeholder 隐式提示
value 输入的默认值
placeholderTextColor 提示的文字颜色
password "*"密码类型
multiline 多行输入
editable false时不可输入
autoFocus 自动聚焦
clearButtonMode 显示清除按钮,可选值never,while-editing、unless-editing、always
maxLength 显示最长字符书
enablesReturnKeyAutomatically 默认false,为true时没有文本时键盘是不能有返回键
returnKeyType 默认为false,键盘返回键类型,default,go,google,join,next,route,search,send,yahoo,done,emergency-call
secureTextEntry 默认false,为true时,像密码框一样隐藏输入内容
onChangeText 输入框内容变化时回调
onChange 文本变化时回调
onEndEditing 编辑结束时回调
onBlur 失去焦点时回调
onFocus 获得焦点时回调
onSubmitEditing 结束编辑后,点击提交按钮触发

Touchable

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
TouchableHighlight 高亮触摸
TouchableOpacity 透明触摸
TouchableWithoutFeedback 无反馈触摸
TouchableHighlight
activeOpacity 触摸时透明度设置
onHideUnderlay 隐藏背景阴影时触发事件
onShowUnderlay 出现背景阴影时触发事件
underlayColor 点击时背景阴影效果的背景颜色
TouchableOpacity
activeOpacity
TouchableWithoutFeedback
onLongPress 长按事件
onPressIn 触摸进入事件
onPressOut 触摸释放事件

Image

1
2
3
4
5
6
7
resizeMode 适应模式,cover、contain、stretch
source {uri: string}、{require('image!name')}
defaultSource ios支持属性
onLoad ios支持属性
onLoadEnd ios支持属性
onLoadStart ios支持属性
onProgress ios支持属性

TarBarIOS

1
2
3
barTintColor 背景颜色
tintCOlor 选中颜色
translucent 是否透明

WebView

1
2
3
4
5
6
7
8
9
10
11
12
automaticallyAdjustCOntentInsets 是否自动调整内部内容
bounces 内容拉到地步或者头部是否回弹
contentInset 内部内容偏移值
html html字符串
injectedJavaScript 注入的js代码
onNavigationStateChange 监听导航状态变化的函数
renderError 监听渲染页面出错的函数
startInLoadingState 是否开启页面加载的状态
renderLoading webview渲染时触发
scrollEnabled 是否能滚动
onNavigationStateChange 页面导航状态改变时触发
scalepageToFit 按照页面比例和内容宽高内容自动缩放内容

==============================常用API =========================================

常用api

AppRegistry

1
2
3
4
5
registerConfig(config: Array<AppConfig>) 静态方法,注册配置
registerComponent(appKey: string, getComponentFunc: ComponentProvider) 注册入口组件
registerRunnable(appKey: string, func: Function) 注册函数监听
getAppKeys() 获取registerRunnable注册的监听键
runApplication(appKey: string, appParameters: any) 运行App

AsyncStorage
全局、异步、键值对

1
2

==============================项目属性=========================================

==============================项目属性=========================================

==============================项目属性=========================================

==============================项目属性=========================================

==============================项目属性=========================================