react-native的组件

react-native
资料整理

###前言
整理学习react-native常用控件。整理自react-native中文网

###基础组件

序号 组件名 作用
1 View 搭建用户界面的最基础组件
2 Text 显示文本内容的组件
3 Image 显示图片内容的组件
4 TextInput 文本输入框
5 ScrollView 可滚动的容器视图
6 StyleSheet 类似CSS样式表的样式抽象层

###交互控件

序号 组件名 作用
1 Button 按钮控件
2 Picker 原生选择器控件
3 Slider 滑动数值选择器
4 Switch 开关控件

###列表视图

序号 组件名 作用
1 FlatList 滚动列表组件
2 SectionList 分组列表组件

###iOS 独有的组件和 API

序号 组件名 作用
1 ActionSheetIOS 从设备底部弹出一个显示一个ActionSheet弹出框选项菜单或分享菜单
2 AlertIOS 弹出一个提示对话框，还可以带有输入框
3 DatePickerIOS 显示一个日期/时间选择器
4 ImagePickerIOS 插入图片
5 NavigatorIOS UINavigationController的封装，用于实现页面的导航跳转
6 ProgressViewIOS 渲染一个UIProgressView进度条
7 PushNotificationIOS 管理推送通知，包括权限处理和应用角标数字
8 SegmentedControlIOS 渲染一个UISegmentedControl顶部选项卡布局
9 TabBarIOS 渲染一个UITabViewController底部选项卡布局。需要和TabBarIOS.Item搭配使用

###Android 独有的组件和 API

序号 组件名 作用
1 BackHandler 监听并处理设备上的返回按钮
2 DatePickerAndroid 打开日期选择器
3 DrawerLayoutAndroid 渲染一个DrawerLayout抽屉布局
4 PermissionsAndroid 对Android 6.0引入的权限模型的封装
5 ProgressBarAndroid 渲染一个ProgressBar进度条
6 TimePickerAndroid 打开时间选择器
7 ToastAndroid 弹出一个Toast提示框
8 ToolbarAndroid 在顶部渲染一个Toolbar工具栏
9 ViewPagerAndroid 可左右翻页滑动的视图容器

###其他

序号 组件名 作用
1 ActivityIndicator 显示一个圆形的正在加载的符号
2 Alert 弹出一个提示框，显示指定的标题和信息
3 Animated 易于使用和维护的动画库，可生成流畅而强大的动画
4 CameraRoll 访问本地相册
5 Clipboard 读写剪贴板内容
6 Dimensions 获取设备尺寸
7 KeyboardAvoidingView 一种视图容器，可以随键盘升起而自动移动
8 Linking 提供了一个通用的接口来调起其他应用或被其他应用调起
9 Modal 一种简单的覆盖全屏的模态视图
10 PixelRatio 可以获取设备的像素密度
11 RefreshControl 此组件用在ScrollView及其衍生组件的内部，用于添加下拉刷新的功能
12 StatusBar 用于控制应用顶部状态栏样式的组件
13 WebView 在原生视图中显示Web内容的组件

###扩展：平台检测 ——Platform 模块

  • 系统判断： Platform.OS === “android” (“ios”)

  • 根据平台使用样式或者代码：Platform.select({android:{…},ios:{…}});

    const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'row',
    justifyContent: 'center',
    alignItems: 'center',
    ...Platform.select({
      android:{
        backgroundColor: '#F500FF',
      },
      ios:{
        backgroundColor: '#666666',
      }
  })
  }
});

  • 根据平台加载组件

    const Component = Platform.select({
    ios: () => require("ComponentIOS"),
    android: () => require("ComponentAndroid")
})();

  • 通过文件扩展名区分平台

    • BigButton.ios.js

    • BigButton.android.js

      直接引用方式：
      const BigButton = require("./BigButton");

  • 系统版本检测：Platform.Version,ios返回的是带小数的字符串（10.3），需要进行强转
    eg: const majorVersionIOS = parseInt(Platform.Version, 10);

updating

– Nowy

– 2018.10.29

分享到