组件列表
ListView - 用于展示数据列表
ScrollView - 带滚动条的容器
Fetch - 请求网络接口数据
TarBarIOS - 切换菜单
TouchableHighlight - 封装视图，可以将一些内容放到这个容器中方便处理点击
View - 窗口，相当于div
Image - 加载图片
Text - 展示文本
TextInput - 文本输入框
Button - 按钮
根据ios、android不同系统
定义一个兼容组件:
var Component = Platform.select({
ios: () => require('ComponentIOS'),
android: () => require('ComponentAndroid'),
})();
调用组件
<Component />
样式兼容:
import { Platform, StyleSheet } from 'react-native';
var styles = StyleSheet.create({
height: (Platform.OS === 'ios') ? 200 : 100,
});
import { Platform, StyleSheet } from 'react-native';
var styles = StyleSheet.create({
container: {
flex: 1,
...Platform.select({
ios: {
backgroundColor: 'red',
},
android: {
backgroundColor: 'blue',
},
}),
},
});
react-native 内置组件
需要在react-native对象进行解构
import {View, TextInput, Text} from 'react-native'
View 用来布局的组件
<View style={{ flex: 1; justifyContent: 'center', alignItems: 'center}}>
<Text>xxxxx</Text>
</View>
Text 显示文本内容
<Text>Component A</Text>
TextInput 文本输入框
属性:
autoCapitalize - 枚举类型，可选值有none,sentences,words,characters.当用户输入时，用于提示。
placeholder - 占位符，在输入前显示的文本内容。
value - 文本输入框的默认值。
placeholdertTextColor - 占位符文本颜色。
password - 如果为ture ， 则是密码输入框，文本显示为＊＊＊。
multiline - 如果为true ， 则是多行输入。
editable - 如果为false ， 文本框不可输入。其默认值事true。
autoFocus - 如果为true， 将自动聚焦。
clearButtonMode - 枚举类型，可选值有never，while－enditing , unless-editing,always.用于显示清除按钮。
maxLength - 能够输入的最长字符数。
enablesReturnKeyAutomatically : 如果值为true，表示没有文本时键盘是不能有返回键的。其默认值为false。
returnKeyType - 枚举类型，可选值有default,go,google,join,next,route,search,send,yahoo,done,emergency-call。表示软键盘返回键显示的字符串。
事件:
onChangeText - 当文本输入框的内容发生变化时，调用该函数。onChangeText接收一个文本的参数对象。
onChange - 当文本变化时，调用该函数。
onEndEditing - 当结束编辑时，调用该函数。
onBlur - 失去焦点出发事件。
onFocus - 获得焦点出发事件。
onSubmitEditing : 当结束编辑后，点击键盘的提交按钮出发该事件。
<TextInput
style={styles.inp}
placeholder="none"
autoCapitalize="none" />
Keyboard 控制 键盘的
KeyboardAvoidingView 键盘
用于解决手机上弹出键盘挡住视图，本组件可以自动根据键盘的位置，调整自身的position
color: 颜色 disabel: 是否可用 onPress: 点击事件 title: 按钮文本
<Button
onPress={onPressLearnMore}
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button" />
Image 图片 加载的两种方式
onLayout: 元素挂载或布局中改变调用 onLoad: 加载成功完成调用 onLoadEnd: 加载结束后，无论成功失败都调用
resizeMode: cover:等比拉伸 strech:保持原有大小 contain:图片拉伸 充满空间
source: 图片的资源地址
1、require引用 使用静态图片资源
<Image source={require('./components/images/i1.png')} style={{width: 100, height: 100}} resizeMode={'cover'} />
注: 使用require静态资源，不允许拼接url <Image source={require('./img/my_icon'+'.png')} />
2、uri 使用网络图片资源
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} />
3、使用原生图片资源(ios中的图片)
打开xCode 在工程 打开images xcassets目录，将图片vue-banner.jpg拖入到appicon下进行导入
加载 <Image source={{uri: 'vue-banner'}} style={styles.imgStyle2} resizeMode="cover" /> 重启项目
4、使用本地文件系统中的资源(相册里的图片)
TarBarIOS 选项卡插件 只能在根元素不能被任何元素包裹
TabBarIOS 属性
barTintColor 标签栏背景色
tintColor 当前选中的标签颜色
translucent Boolean 是否标签栏半透明
<TabBarIOS barTintColor="#ccc" tintColor="#fff">
<TabBarIOS.Item> ... </TabBarIOS.Item>
</TabBarIOS>
TabBarIOS.Item 属性
title: 图标下面的标题文字
badge: 右上角显示一个红色气泡 提示气泡
icon: 显示的图标
icon={require('../images/i4.png')} 加载本地
icon={{uri: base64Icon, scale: 3}} 加载其它 并且带缩放
selectedIcon: 选中的图标
selected: 是否为选中状态 selected: {this.state.selectName = 'blue'}
onPress(): 按下
Fetch 网络请求
获取接口数据, 处理get或post的请求
Example:
1、Get
onPressLearnMore(){
let that = this;
const REQUEST_URL = 'http://goucai.diyicai.com/lottery/hisnumber.action?lotteryId=001&issueLen=20&d=1496242956216';
fetch(REQUEST_URL)
.then((response) => {
return response.json(); //把response转为json
})
.then((responseData) => { // 接收上面的转好的json
debugger;
let data = responseData[0].ernieDate;
that.setState({lotter: data})
console.log(data);
})
.catch((error) => {
this.setState({
error: true,
errorInfo: error
})
})
.done();
}
2、post:
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
})
FlatList 加载网络数据
SectionList 分组的列表组件
不需要分组可以使用FlatList, 如果需要分组使用SectionList
TouchableHighlight 封装视图 把一部分内容放到一个容器中可以方便处理
render: function () {
return (
<TouchableHighlight onPress={this._onPressButton} style={styles.mt40}>
<View>
<Text>{this.state.userName}</Text>
<Image
style={styles.mt40}
source={require('./src/images/1.jpg')}
/>
</View>
</TouchableHighlight>
);
}
Dimensions 获取设备屏幕的宽高
let winWidth = Dimensions.get('window').width;
let winHeight = Dimensions.get('window').height;
DatePickerIOS 日期选择器
date: 当前被选中的日期 mode: 选择器模式 onDateChange: 选中事件
maximumdDate: 可选的最大日期 minimumDate: 可选的最小日期
minuteInterval: 可选的最小分钟 timeZoneOffsetInMinutes: 时区差，单位分钟
TimePickerAndroid Android时间选择器的对话框
ActivityIndicator loading加载图标
animating: 是否显示 true false
color: 图片颜色
size: 大小 small large
Modal 弹层
不是弹窗，而是整弹个层
animationType: 展示层的动画效果 slide 滑动 fade 淡入淡出 none 无
onRequestClose:
alert、AlertIOS 对话框
Alert.alert(标题，内容，[{确定按钮和}]
<Text onPress={() => Alert.alert(
'这里是弹层的标题',
'这里是内容',
[
{text: '取消', onPress: () => console.log('Cancel Pressed!')}, // 显示的按钮和回调函数
{text: '确定', onPress: () => console.log('OK Pressed!')},
]
)}>点击显示弹窗</Text>
Navigator NavigatorIOS 导航
StatusBar 状态栏组件
控制顶部运营商、电量位置的
属性:
animated bool 进行设置当状态栏的状态发生变化的时候是否需要加入动画。当前该动画支持backgroundColor,barStyle和hidden属性
hidden bool 进行设置状态栏是否隐藏（最顶部的那条栏）
backgroundColor color类型，仅支持Android设备，设置状态栏的背景颜色
translucent bool类型，仅支持Android设备, 进行设置状态栏是否为透明。当状态栏的值为true的时候，应用将会在状态栏下面进行绘制显示。这样在Android平台上面就是沉浸式的效果，可以达到Android和iOS应用一致性效果。该值常常配置半透明效果的状态栏颜色一起使用
barStyle enum('default','light-content') 枚举类型，仅支持iOS设备。进行设置状态栏文字的颜色
networkActivityIndicatorVisible bool类型，仅支持iOS设备。设置状态栏上面的网络进度加载器是否进行显示
showHideTransition enum('fade','slide') 枚举类型，仅支持iOS设备。进行设置当隐藏或者显示状态栏的时候的动画效果。默认值为'fade'
Picker PickerIOS 象select的选择菜单
1、selectedValue: 选中后的值
2、onValueChange: 触发事件
3、PickerIOS.Item: 定义菜单的先项
<PickerIOS
style={{width:200}}
selectedValue={this.state.language}
onValueChange={(lang) => this.setState({language: lang})}>
<PickerIOS.Item label="Java" value="java" />
<PickerIOS.Item label="JavaScript" value="js" />
</PickerIOS>
<Text>当前选择的是:{this.state.language}</Text>
Slider 选择一个范围的组件, 滑块
属性:
disabled bool 如果为true，用户无法移动这个滑动条。默认值为false
maximumValue number 滑动条最大值。默认为1
minimumValue number 滑动条最小值，默认为0
onSlidingComplete function 当用户完成值的改变被回调的方法
onValueChange function 当用户正在滑动滑动条持续回调的方法
step number 滑动条的最小单位。这个值应该在0到最大值-最小值之间。默认为0
testID string
value number 滑动条选择的值。这个值应该在最小值和最大值之间，它们的默认值分别为0和1。默认值为0
Switch 开关滑块组件
disabled 是否禁用
onValueChange 当值改变时回调
value 开关是否打开，默认false
onTintColor: 开启状态背景颜色
tintColor: 关闭状态时边框颜色或背景色
thumbTintColor: 开关上按钮的颜色
testID
ListView 用于垂直滚动列表，用于元素之间结构近似而仅数据不同, listView不立即渲染所有元素, 优先渲染屏幕可见元素
ListView继承了ScrollView所以有ScrollView下所有的属性
ListView属性:
dataSource - 列表数据源
renderRow - 解析每一条的数据的展示结构样式
rowHasChanged - 函数也是ListView的必需属性。这里我们只是简单的比较两行数据是否是同一个数据（===符号只比较基本类型数据的值，和引用类型的地址）来判断某行数据是否变化了。
scrollView - automaticallyAdjustContentInsets={false} 如果不设置这个属性顶部会一个块留白
ListView方法:
ListView.DataSource - 用于比对两条数据是否相同，如果不相同进行渲染
Example:
class DemoComponent extends Component {
constructor(props){
super(props);
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.state = {
dataSource: ds.cloneWithRows([
{
img: require('../../images/car-img.png'),
title: '福特福克斯2011款 两厢 1.8L 自动时尚型'
},
{
img: require('../../images/car-img.png'),
title: '福特福克斯2011款 两厢 1.8L 自动时尚型'
},
{
img: require('../../images/car-img.png'),
title: '福特福克斯2011款 两厢 1.8L 自动时尚型'
}
])
}
}
// 返回每一条数据的结构
carRenderRow(rowData){
return (
<View style={styles.carList}>
<Image source={rowData.img} style={styles.carPicture} />
<Text style={styles.carFont1}>{rowData.title}</Text>
</View>
)
}
render(){
return (
<View style={{flex: 1, marginBottom: 60}}>
<ListView
dataSource={this.state.dataSource}
renderRow={this.carRenderRow} />
</View>
)
}
}
RefreshControl 下拉刷新
PullToRefreshAndroidView 也是实现下拉刷新的组件
属性方法
onRefresh function方法 当视图开始刷新的时候调用
refreshing bool 决定加载进去指示器是否为活跃状态，也表名当前是否在刷新中
colors [ColorPropType] android平台适用 进行设置加载进去指示器的颜色，至少设置一种，最好可以设置4种
enabled bool android平台适用 用来设置下拉刷新功能是否可用
progressBackgroundColor ColorPropType 设置加载进度指示器的背景颜色
size RefreshLayoutConsts.SIZE.DEFAULT android平台适用 加载进度指示器的尺寸大小 ，具体可以查看RefreshControl.SIZE(详细点击进入)
tintColor ColorPropType iOS平台适用 设置加载进度指示器的颜色
title string iOS平台适用 设置加载进度指示器下面的标题文本信息
AppState、AppStateIOS 获取应用当前是在前台还是在后台，并且能在状态变化的时候通知你
AppState.currentState 返回的值:
active - 表示当前App在前台运行
background - 应用正在后台运行。用户既可能在别的应用中，也可能在桌面。
inactive - 该状态我们可以暂时不考虑，因为该状态不会出现在现在React Native App中。
AppRegistry 运行RN的入口
AppRegistry.registerComponent('exampleApp', () => exampleApp);
AsyncStorage 简单的、未加密的、异步的、持久化的Key-Value存储系统
一、方法: anyncStroage每个方法返回的都是一个Promise
getItem(key, callback) - 获取数据
setItem(key, value, callback) - 存储数据
removeItem(key, callback) - 删除数据
mergeItem(key, value, callback) - 合并两值
clear() - 删除全部
getAllKeys(callback) - 获取所有可访问到的数据
flushGetRequest() - 清除所有进行中的查询操作
multiGet(keys <Array>, callback) - 获取keys所包含所有的字段值
AsyncStroage.multiGet(['user', 'enter'])
.then((data) => {
// 这里可以取到本地存储中的user和enter的值
/*
* data返回的是一个二维数组
* [
* ["key1", "aaa"],
* ["key2", "bbb"]
* ]
*/
let user = JSON.parse(data);
})
ProgressBarAndroid ProgressViewIOS 加载进度
属性:
View 相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)
progress number 设置进度值 (范围在0-1之间)
progressTintColor string 设置进度条本身的颜色
progressViewStyle enum('default','bar') 加载进度的风格 枚举类型 默认风格和Bar条类型
trackImage Image.propTypes.source 设置一个可以拉伸的图片，设置进度条剩下部分进度的图片
trackTintColor string 进度条的颜色(已经有进度的情况)
DrawerLayoutAndroid 抽屉 安卓
SegmentedControlIOS
ToolbarAndroid
TouchableNativeFeedback
TouchableOpacity
TouchableWithoutFeedback
ViewPagerAndroid
VirtualizedList
WebView
API
ActionSheetIOS
AdSupportIOS
Animated
BackAndroid
BackHandler 后退
CameraRoll 访问本地相册
Clipboard 读写剪贴板的内容
DatePickerAndroid Android日期选择器的对话框
Easing
Geolocation 地理位置
ImageEditor 根据URI剪裁对应的图片
ImagePickerIOS
ImageStore
InteractionManager
LayoutAnimation 当布局变化时，自动将视图运动到它们新的位置上
Linking 传入和传出的App链接进行交互
NativeMethodsMixin
NetInfo 获取设备联网或离线的状态信息
PanResponder 多点触摸操作协调成一个手势
PermissionsAndroid
PixelRatio 获取设备的像素密度的方法
PushNotificationIOS 处理应用的推送通知
Share 打开一个对话框来共享文本内容
StyleSheet 定义css样式
Systrace
ToastAndroid
Vibration 控制设备震动
布局样式属性
阴影样式属性
第三方组件
rnpm介绍 下载完第三方组件不能直接用，需要通过rnpm 直接组件的内容挂载到工程中去，需要执行$ rnpm link 模块名 ，与react-native link 相同
安装rnpm $ npm i rnpm -g
link的原因：以下组件都是原生开发，wrapper了一层js，因此需要link .a到project中
$ react-native-elements 基础组件 https://github.com/react-native-community/react-native-elements#buttons
$ lodash
$ query-string
$ sha1 加密模块
$ react-native-button
$ react-native-audio 音频
$ react-native-video 视频 https://github.com/react-native-community/react-native-video
$ react-native-image-picker 摄像头和本地相册 https://github.com/marcshilling/react-native-image-picker
$ react-native-progress 进度条
$ react-native-storage 存储 https://github.com/sunnylqm/react-native-storage/blob/master/README-CHN.md
$ react-native-sk-countdown 倒计时
$ react-native-swiper 轮播 https://github.com/leecade/react-native-swiper
$ react-native-barcodescanner 扫二维码 Android https://github.com/ideacreation/react-native-barcodescanner
http://blog.csdn.net/liu__520/article/details/52889950
$ react-native-animatable 动画 https://github.com/oblador/react-native-animatable
$ react-native-device-info 设备信息 https://github.com/rebeccahughes/react-native-device-info
http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-acquisition-device-information-component-react-native-device-info/
Geolocation 内置的地理位置
http://www.jianshu.com/p/53ff78168acc 整理的插件
https://yq.aliyun.com/articles/78154?utm_campaign=wenzhang&utm_medium=article&utm_source=QQ-qun&201759&utm_content=m_20152
http://www.jianshu.com/p/e30feb098ef2
react-native-vector-icons 图标类
1、安装 npm i react-native-vector-icons --save && react-native link react-native-vector-icons
2、引用
import FontAwesome from 'react-native-vector-icons/FontAwesome'; // 引用的FontAwesome文件
/* 图标文件名
Entypo
EvilIcons
FontAwesome
Foundation
Ionicons
MaterialIcons
MaterialCommunityIcons
Octicons
Zocial
SimpleLineIcons
*/
class myfirst extends Component {
render() {
return (
<View style={styles.container}>
<FontAwesome name="address-book" size={20} color="#4F8EF7" />
</View>
)
}
}
3、注意: 这里icon对一些组件封装
import Icon from 'react-native-vector-icons/Ionicons';
return (
<TabBarIOS>
<Icon.TabBarItem // 这里对TabBarItem进行了封装 或者ToolbarAndroid
title="Home"
iconName="ios-home-outline" // 这里属性名为 iconName 而不是 icon
selectedIconName="ios-home"> // 选中的
<View style={styles.tabContent}><Text>Home Tab</Text></View>
</Icon.TabBarItem>
</TabBarIOS>
);
https://github.com/oblador/react-native-vector-icons
http://ionicons.com/ 图标官网
http://blog.csdn.net/uuq/article/details/53150841 使用方法
https://github.com/oblador/react-native-vector-icons#installation 图标对应的name值
mockjs
npm i mockjs --save
import Mock from 'mockjs'
| 参考资料
| react.parts/native // 第三方组件列表
|
| http://www.lcode.org/react-native/
| http://blog.csdn.net/hsbirenjie/article/category/6307126/3
| http://blog.csdn.net/jiangqq781931404/article/category/6055594/2
| http://www.hangge.com/blog/cache/category_76_1.html
| http://blog.csdn.net/mengks1987/article/category/6850683
| http://blog.csdn.net/yuanguozhengjust/article/category/6058018
|
