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
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
flexDirection
1
| flexDirection: row | column
|
flexWrap
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
全局、异步、键值对
==============================项目属性=========================================
==============================项目属性=========================================
==============================项目属性=========================================
==============================项目属性=========================================
==============================项目属性=========================================