推荐 11 款 React Native 开源移动 UI 组件

React 2020-05-21

本文推荐 11 个非常棒的React Native开源组件，希望能给移动应用开发者提供帮助。

React Native 是近期 Facebook 基于 MIT 协议开源的原生移动应用开发框架，已经用于 Facebook 的生产环境。React Native 可以使用最近非常流行的React.js库来开发 iOS 和 Android 原生 APP。

1. iOS 表单处理控件 tcomb-form-native

tcomb-form-native是 React Native 强大的表单处理控件，支持 JSON 模式，可插拔的外观和感觉。在线演示：http://react.rocks/example/tcomb-form-native。

2. 摄像机视图 react-native-camera

react-native-camera是 React Native 的摄像头 viewport。这个模块应用于开发的早期阶段，它支持摄像头的转换和基本图片捕捉。

使用示例：

?
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
var React=require( 'react-native' );
{
AppRegistry,
StyleSheet,
Text,
View,
}=React;
Camera=require( 'react-native-camera' );
cameraApp=React.createClass({
render: function (){
return (
<View>
<TouchableHighlightonPress={ this ._switchCamera}>
<View>
<Camera
ref= "cam"
aspect= "Stretch"
orientation= "PortraitUpsideDown"
style={{height:200,width:200}}
/>
</View>
</TouchableHighlight>
</View>
);
},
_switchCamera: (){
.refs.cam. switch ();
}
});
AppRegistry.registerComponent( 'cameraApp' ,()=>cameraApp);

3. react-native-video

react-native-video是 <Video> 标签控件。

示例：

?
14
//Withinyourrenderfunction,assumingyouhaveafilecalled
//"background.mp4"inyourproject
<Videosource={ "background" }style={styles.backgroundVideo}repeat={ true }/>
//Lateroninyourstyles..
styles=Stylesheet.create({
backgroundVideo:{
resizeMode: 'cover' //stretchandcontainalsosupported
position: 'absolute' top:0,
left:0,
bottom:0,
right:0,
});

4. 导航控件 react-native-navbar

react-native-navbar是用于 React Native 上简单的定制化导航栏。

示例代码：

?
24
NavigationBar=require( 'react-native-navbar' ExampleProject=React.createClass({
renderScene: (route,navigator){
Component=route.component;
navBar=route.navigationBar;
if (navBar){
navBar=React.addons.cloneWithProps(navBar,{navigator:navigator,
route:route
});
} (<Viewstyle={styles.navigator}>
{navBar}<Componentnavigator={navigator}route={route}/>
</View>
);
(){ (<Navigator
style={styles.navigator}
renderScene={ .renderScene}
initialRoute={{
component:InitialView,
navigationBar:<NavigationBartitle= "InitialView" />
}}
);
}
5. React Native 轮播控件 react-native-carousel

react-native-carousel是一个简单的 React Native 轮播控件。

?
11
Carousel=require( 'react-native-carousel' ); ExampleProject=React.createClass({
render(){
(
<Carouselwidth={375}indicatorColor= "#ffffff" inactiveIndicatorColor= "#999999" >
<MyFirstPage/>
<MySecondPage/>
<MyThirdPage/>
</Carousel>
);
}
6. 下拉刷新组件 react-native-refreshable-listview

react-native-refreshable-listview是下拉刷新 ListView，当数据重载的时候显示加载提示。

7. Modal 组件 react-native-modal

react-native-modal是 React Native 的 <Modal> 组件。

8. 文本解析控件 react-native-htmltext

react-native-htmltext可以用 HTML 像 markup 一样在 ReactNative 里创建出相应效果的样式文本。ReactNative 为那些样式文本提供一个文本元素，用于取代 NSAttributedString，你可以创建嵌套的文本：

?
4
<Textstyle={{fontWeight: 'bold' }}>
Iambold
<Textstyle={{color: 'red' }}>andred</Text>
</Text

9. react-native-htmlview

react-native-htmlview是一个将 HTML 目录作为本地视图的控件，其风格可以定制。

10. LinearGradient 组件 react-native-linear-gradient

react-native-linear-gradient是一个 React Native 的 LinearGradient 组件。

11. 双向循环播放 react-native-looped-carousel

react-native-looped-carousel是基于 React Native 的双向循环播放控件。

?
14
'usestrict' ; 'react-native-looped-carousel' Dimensions=require( 'Dimensions' {width,height}=Dimensions.get( 'window' {
View
}=React; carouselTest=React.createClass({render: (<Carouseldelay={500}>
<Viewstyle={{backgroundColor: '#BADA55' 'blue' </Carousel>
);
}
});
'carouselTest'

相关文章

react 学习11高阶组件
react 中的高阶组件主要是对于 hooks 之前的类组件来说的，如...
react 学习(四) 批量更新及合成事件
我们上一节了解了组件的更新机制，但是只是停留在表层上，例...
react 学习(二) 实现类和函数式组件
我们上一节了解了 react 的虚拟 dom 的格式，如何把虚拟 dom...
react 学习12实现 cloneElement
react 本身提供了克隆组件的方法，但是平时开发中可能很少使...
实现简版 react 状态管理器 mobx
mobx 是一个简单可扩展的状态管理库，中文官网链接。小编在接...
mini react-window(一) 实现固定高度虚拟滚动
我们在平常的开发中不可避免的会有很多列表渲染逻辑，在 pc ...