定义组件
:
class 组件名 extends Component {
render () {
return <Image> | <Text> | <view> // 三个自带的组件
}
}
AppRegistry.registerComponent ( ‘应用名 | 组件名’ , () => 组件名 ); // 这个只能有一次
控制组件 : props : 在父组件中指定,指定后不可改, (组件属性),固定
state: 可改, 变化
初始化 state: constructor ( props ) {}
修改 state: 用 setState
样式 : 使用驼峰命名法,使用 const style = StyleSheet.create ( {} )
样式尺寸无单位
写在组件中的样式要有两层 {} ,而调用样式组件的只要一层 {} 即可
flex 宽高 : flex:1 意为让组件占用所有的空间,若值不一,则按比例占据
处理文本输入 :
onChangeText: 文本变化时
onSubmitEditing: 文本被提交时调用
ScrollView: 可滚动的容器, 可以垂直和水平滚动(通过 horizontal 控制)
ListView: 功能和 ScrollView 差不多,但性能更好 适合于长列表且元素可删可增
并不立即渲染所有内容,优先渲染屏幕可见元素
必须的属性 :dataSource (列表的数据源)
renderRow ( 逐个解析数据源你中的数据)
rowHasChanged 函数
XMLHttpRequest: ( ajax )
fetch (‘ URL ’)
fetch (‘ url ’ , {method: ’ get ’, headers:{} , body:JSON.stringify ( {} ) } ) //body 为向服务器发送的数据,如果服务器无法识别,则写为 body: ‘ key=value&key=value ’
fetch (‘http://facebook.github.io/react-native/movies.json‘)
.then ( ( response ) => response.json () ) // 将 response (请求到的数据)转为 json 格式 还有 response.text ()
.then ( ( responseJson ) => { return responseJson.movie ; } ) // 将 json 的 movie return 出去
.catch ( ( error ) => { console.log (‘ error ’) } )
asyns | await 语法,异步的完美解决方案
ios 默认阻止所有非 https 的请求
颜色 : 所有的都和 css 一样, #aaa rgb rgba transparent …
图片 : <Image source = { require (‘ ./ my-icon.png ’) } /> // ./ 不能少,使用 require 时必须重启 server
require 后面的必须是字符串,但是 {} 里的可以说变量名
如果你有 my-icon.android.png 和 my-icon.ios.png 会自动识别
使用 @2x @3x 这样的后缀,为不同的精度提供图片 img@2x.png img@3x.png
使用混合 app 的图片 | 网络图片 :
<Image source = { { uri: ‘ app_icon ’ }} style={ { width: 40 ; height: 40 }} /> // 必须指定尺寸
自动制定尺寸 :
require (‘ image!x ’) 例如 : require (‘ image!logo ’) // 引用 react.Imageset/logo.png
精灵图 : <Image source = { { uri: ‘ something.jpg ’ crop: { left:10 , top:50 , width:20 , height:40} }} />
背景图嵌入 :
return (
<Image source = {…..} >
<Text> inside </Text>
</Image>
)
touch 事件 :
<TouchableHeightlight onPress={ 事件名 }></TouchHeightlight>
点击组件 :
TouchableHeightlight : 用户点击时背景变暗 // 常用,但效果不明显
TouchableNativeFeedback : 用户按下类似涟漪效果 // Android
TouchableOpacity : 用户按下降低按钮的透明度,不会改变背景色 // 常用,用这个
TouchableWidthoutFeedback : 用户点击时不产生任何效果
触摸状态 :
onPress : 点击
onLongPress : 长按
pagingEnabled : 滑动 // 配合 ScrollView 组件使用(可水平垂直) | ViewPagerAndroid (水平)
maxmumZoomScale | minmumZoomScale : 双指缩放 // 配合 ScrollView 使用
动画 : (比较麻烦,完了再看看)
Animated: 创建更精细的交互控制的动画,仅关注动画的输入和输出声明,动画事件,响应当前动画值
LayoutAnimation: 在全局内创建和更新动画,常用来更新 flexbox 布局, Android 中不好用
无障碍功能 :
accessible ( iOS | Android ) : 单独加在标签内
accessible = {true} : 只可选中父元素,不能选中子元素
accessibilityLabel ( ios | android ) : 最好加上,让用户知道内容 // 用法和上面类似,后面为字符串
accessibilityTraits ( ios ) 告诉用户选择的是标签 | 按钮 | 头部
定时器 :
setTimeout | clearTimeout : 竟可能快的执行
setInterval | clearInterval :
setImmediate | clearImmediate : 在当前 js 执行结束的时候执行,在发送数据到原生之前, 如果在其回调内部还有 setImmediate ,则紧接着立即执行,而不会再调用之前等原生代码 .
promise 的实现就是使用了 setImmediate 实现的
requestAnimationFrame | cancelAnimationFrame : 在每帧刷新之后执行一次
InteractionManager : 确保在执行工作之前所有的交互和动画已经处理完毕,提高效率,同时支持注册和清除动画
TimerMixin: 解决卸载组件后,计算器仍被激活的问题,可以避免很多 BUG , 属于 ES5 语法, es6 需要清除
需要单独安装 //npm i react-timer-mixin --save
组件加
var TimerMixin = require (‘ react-timer -mixin ’) // 组件外
mixins: [ TimerMixin ],然后所有的计算器前面都加上 this. // 组件内
setNativeProps: (方法) 用于不得不频繁刷新但又遇到性能瓶颈的时候,不该常使用,用来做连续的动画
TouchableOpacity: (组件) 内部使用了 setNativeProps 方法
单元测试 : cd react-native
./scripts/run-android-local-unit-test.sh
集成测试 :cd react-native
npm install
./scripts/run-android-local-integration-test.sh
导航器对比 :
Navigator: 适合于刚开始接触
使用纯 JavaScript 实现,在 renderScene 渲染不同的组件,用 configureScene 配置场景和动画
有很多方法,参 Navigator ;
NavigatorIOS: 针对 iOS 平台开发 , 基于 Apple 的组件开发 ,
NavigationExperimental: 想要更好的管理导航栈
性能 :
console.log 语句是否全部移除 : npm install babel-plugin-transform-remove-console --save
然后新建一个文件
开发模式( dev = true ) :
缓慢的导航器( Navigator )切换 :
ListView 初始化太慢
使用 transform: [ { scale } ]来改变图片尺寸
升级 :
时刻保持最新版本
react-native : npm info react-native 查看最新版本
更新 react-native node react 升级项目模板
iOS 和 Android 代码区分 :
放到不同的文件夹里 或 在名称上加以区分
特定平台扩展名 :
aaaa.ios.js | aaaa.android.js // 命名后就可以在其他组件中直接应用 aaaa ,无需判断平台
Platform.select () // 返回对应平台的值
平台模块 : ( Platform )
如果组件只有一小部分代码需要一句平台定制,使用 Platform
import { Platform , SrtleSheet } from ‘ react-native ’ ;
var styles = StyleSheet.create ( {
height: ( Platform.os === ‘ ios ’ ) ? 200 : 100 ,
} );
检测 Android 版本 :
使用 Platform 检测
class 组件名 extends Component {
render () {
return <Image> | <Text> | <view> // 三个自带的组件
}
}
AppRegistry.registerComponent ( ‘应用名 | 组件名’ , () => 组件名 ); // 这个只能有一次
控制组件 : props : 在父组件中指定,指定后不可改, (组件属性),固定
state: 可改, 变化
初始化 state: constructor ( props ) {}
修改 state: 用 setState
样式 : 使用驼峰命名法,使用 const style = StyleSheet.create ( {} )
样式尺寸无单位
写在组件中的样式要有两层 {} ,而调用样式组件的只要一层 {} 即可
flex 宽高 : flex:1 意为让组件占用所有的空间,若值不一,则按比例占据
处理文本输入 :
onChangeText: 文本变化时
onSubmitEditing: 文本被提交时调用
ScrollView: 可滚动的容器, 可以垂直和水平滚动(通过 horizontal 控制)
ListView: 功能和 ScrollView 差不多,但性能更好 适合于长列表且元素可删可增
并不立即渲染所有内容,优先渲染屏幕可见元素
必须的属性 :dataSource (列表的数据源)
renderRow ( 逐个解析数据源你中的数据)
rowHasChanged 函数
XMLHttpRequest: ( ajax )
fetch (‘ URL ’)
fetch (‘ url ’ , {method: ’ get ’, headers:{} , body:JSON.stringify ( {} ) } ) //body 为向服务器发送的数据,如果服务器无法识别,则写为 body: ‘ key=value&key=value ’
fetch (‘http://facebook.github.io/react-native/movies.json‘)
.then ( ( response ) => response.json () ) // 将 response (请求到的数据)转为 json 格式 还有 response.text ()
.then ( ( responseJson ) => { return responseJson.movie ; } ) // 将 json 的 movie return 出去
.catch ( ( error ) => { console.log (‘ error ’) } )
asyns | await 语法,异步的完美解决方案
ios 默认阻止所有非 https 的请求
颜色 : 所有的都和 css 一样, #aaa rgb rgba transparent …
图片 : <Image source = { require (‘ ./ my-icon.png ’) } /> // ./ 不能少,使用 require 时必须重启 server
require 后面的必须是字符串,但是 {} 里的可以说变量名
如果你有 my-icon.android.png 和 my-icon.ios.png 会自动识别
使用 @2x @3x 这样的后缀,为不同的精度提供图片 img@2x.png img@3x.png
使用混合 app 的图片 | 网络图片 :
<Image source = { { uri: ‘ app_icon ’ }} style={ { width: 40 ; height: 40 }} /> // 必须指定尺寸
自动制定尺寸 :
require (‘ image!x ’) 例如 : require (‘ image!logo ’) // 引用 react.Imageset/logo.png
精灵图 : <Image source = { { uri: ‘ something.jpg ’ crop: { left:10 , top:50 , width:20 , height:40} }} />
背景图嵌入 :
return (
<Image source = {…..} >
<Text> inside </Text>
</Image>
)
touch 事件 :
<TouchableHeightlight onPress={ 事件名 }></TouchHeightlight>
点击组件 :
TouchableHeightlight : 用户点击时背景变暗 // 常用,但效果不明显
TouchableNativeFeedback : 用户按下类似涟漪效果 // Android
TouchableOpacity : 用户按下降低按钮的透明度,不会改变背景色 // 常用,用这个
TouchableWidthoutFeedback : 用户点击时不产生任何效果
触摸状态 :
onPress : 点击
onLongPress : 长按
pagingEnabled : 滑动 // 配合 ScrollView 组件使用(可水平垂直) | ViewPagerAndroid (水平)
maxmumZoomScale | minmumZoomScale : 双指缩放 // 配合 ScrollView 使用
动画 : (比较麻烦,完了再看看)
Animated: 创建更精细的交互控制的动画,仅关注动画的输入和输出声明,动画事件,响应当前动画值
LayoutAnimation: 在全局内创建和更新动画,常用来更新 flexbox 布局, Android 中不好用
无障碍功能 :
accessible ( iOS | Android ) : 单独加在标签内
accessible = {true} : 只可选中父元素,不能选中子元素
accessibilityLabel ( ios | android ) : 最好加上,让用户知道内容 // 用法和上面类似,后面为字符串
accessibilityTraits ( ios ) 告诉用户选择的是标签 | 按钮 | 头部
定时器 :
setTimeout | clearTimeout : 竟可能快的执行
setInterval | clearInterval :
setImmediate | clearImmediate : 在当前 js 执行结束的时候执行,在发送数据到原生之前, 如果在其回调内部还有 setImmediate ,则紧接着立即执行,而不会再调用之前等原生代码 .
promise 的实现就是使用了 setImmediate 实现的
requestAnimationFrame | cancelAnimationFrame : 在每帧刷新之后执行一次
InteractionManager : 确保在执行工作之前所有的交互和动画已经处理完毕,提高效率,同时支持注册和清除动画
TimerMixin: 解决卸载组件后,计算器仍被激活的问题,可以避免很多 BUG , 属于 ES5 语法, es6 需要清除
需要单独安装 //npm i react-timer-mixin --save
组件加
var TimerMixin = require (‘ react-timer -mixin ’) // 组件外
mixins: [ TimerMixin ],然后所有的计算器前面都加上 this. // 组件内
setNativeProps: (方法) 用于不得不频繁刷新但又遇到性能瓶颈的时候,不该常使用,用来做连续的动画
TouchableOpacity: (组件) 内部使用了 setNativeProps 方法
单元测试 : cd react-native
./scripts/run-android-local-unit-test.sh
集成测试 :cd react-native
npm install
./scripts/run-android-local-integration-test.sh
导航器对比 :
Navigator: 适合于刚开始接触
使用纯 JavaScript 实现,在 renderScene 渲染不同的组件,用 configureScene 配置场景和动画
有很多方法,参 Navigator ;
NavigatorIOS: 针对 iOS 平台开发 , 基于 Apple 的组件开发 ,
NavigationExperimental: 想要更好的管理导航栈
性能 :
console.log 语句是否全部移除 : npm install babel-plugin-transform-remove-console --save
然后新建一个文件
开发模式( dev = true ) :
缓慢的导航器( Navigator )切换 :
ListView 初始化太慢
使用 transform: [ { scale } ]来改变图片尺寸
升级 :
时刻保持最新版本
react-native : npm info react-native 查看最新版本
更新 react-native node react 升级项目模板
iOS 和 Android 代码区分 :
放到不同的文件夹里 或 在名称上加以区分
特定平台扩展名 :
aaaa.ios.js | aaaa.android.js // 命名后就可以在其他组件中直接应用 aaaa ,无需判断平台
Platform.select () // 返回对应平台的值
平台模块 : ( Platform )
如果组件只有一小部分代码需要一句平台定制,使用 Platform
import { Platform , SrtleSheet } from ‘ react-native ’ ;
var styles = StyleSheet.create ( {
height: ( Platform.os === ‘ ios ’ ) ? 200 : 100 ,
} );
检测 Android 版本 :
使用 Platform 检测
最低0.47元/天 解锁文章
5045
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
