【REACT NATIVE 系列教程之十一】插件的安装、使用与更新(示例:react-native-tab-navigator) - 推酷
【REACT NATIVE 系列教程之十一】插件的安装、使用与更新(示例:react-native-tab-navigator)
本篇主要来详细介绍如何安装、升级插件及讲解一个react-native-tab-navigator的示例。
首先推荐一个插件网站：
（此插件属于半官方维护的）
本文举例使用的插件：react-native-tab-navigator ，选项卡形式的导航
找到我们想使用的插件, 搜索： react-native-tab-navigator
2. 我们可以看到插件介绍页面有详细的介绍，以及如何安装也有介绍，如下图：
图中红色框选的是插件在github的源码页面地址～
3. 下面对项目进行安装此插件：
3.1 &打开终端，cd 到项目根路径
3.2 使用命令：
npm install react-native-tab-navigator –save
进行安装，如下图：
3.3 安装成功后，你会在项目下的package.json文件内dependencies下看到(如下图)：
新增加了一条：”react-native-tab-navigator”: “^0.3.2”
4. 更新插件的两种方式方式（上）：
4.1: &打开终端，cd 到目标项目根路径
4.2 使用命令:
npm install xxx@
yyy –save –registry& zzz
& –save & 记录版本到项目的package.json下留底（一般最好都带上）
& –registry
指定 镜像源
： @符号前是 插件名，
@ 符号后是插件
目标版本号
（如果目标版本号yyy填：latest &表示该插件的最新版本） &
zzz ：制定的镜像源地址
这里举例：
npm install[email&protected] –save
以上命令： 更新react-native-tab-navigator插件到最新 &，且将版本号记录到项目的json文件中 。 & &
4. 更新插件的两种方式方式（下）：
4.1 ：利用插件检查模块最新版本：
4.2 : &安装到项目中，然后利用命令：ncu &进行查看版本，如下图：
5. 插件的使用：
5.1: 首先导入（使用node_modules下的模块，不需要路径）：
importTabNavigatorfrom 'react-native-tab-navigator';
5.2 : &绘制代码段：
render() {
&&&&return (
&&&&&&......
&&&&&&&&&TabNavigatortabBarStyle={styles.tab} &
&&&&&&&&&&&&&TabNavigator.Item
&&&&&&&&&&&&selected={this.state.selectedTab === 'home'}
&&&&&&&&&&&&title=&Home&
&&&&&&&&&&&&renderIcon={() =& &Image source={require('./res/home_normal.png')} /&}
&&&&&&&&&&&&renderSelectedIcon={() =& &Image source={require('./res/home_focus.png')} /&}
&&&&&&&&&&&&badgeText=&61&
&&&&&&&&&&&&onPress={() =& this.setState({ selectedTab: 'home' })}&
&&&&&&&&&Viewstyle={{flex:1,backgroundColor:'#fff',justifyContent:'center'}}&
&&&&&&&& &&&&&Text style={{fontSize:20}}&我是第一个选项卡，直接书写出的视图!&/Text&
&&&&&&&&&/View&
&&&&&&&&&&&&&/TabNavigator.Item&
&&&&&&&&&&&&&TabNavigator.Item
&&&&&&&&&&&&selected={this.state.selectedTab === 'profile'}
&&&&&&&&&&&&title=&Profile&
&&&&&&&&&&&&renderIcon={() =& &Image source={require('./res/personal_normal.png')} /&}
&&&&&&&&&&&&renderSelectedIcon={() =& &Image source={require('./res/personal_focus.png')} /&}
&&&&&&&&&&&&onPress={() =& this.setState({ selectedTab: 'profile' })}&
&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&TestPage/&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&/TabNavigator.Item&
&&&&&&&&&&&/TabNavigator&
&&&&&&......
TabNavigator.Item: 每个选项卡的组件名，其中属性解释：
selected： 当前选项卡是否被选中
title： 标题
renderIcon： icon
renderSelectedIcon： 被选中时的icon
badgeText： 提示的角标数字
onPress： 点击后事件响应函数
当选项卡被选中后，才会显示选项卡绘制的视图内容。
最后给出一个示例,两个文件：
importReact, { Component } from 'react';
&&StyleSheet,
} from 'react-native';
importTabNavigatorfrom 'react-native-tab-navigator';
importTestPagefrom './TestPage';
export default class Main extends Component {
constructor(props) {
super(props);
this.state = {
&&&&&&selectedTab:'home'
&&render() {
&&&&return (
&&&&&&&Viewstyle={{flex: 1}}&
&&&&&&&&&Text style={styles.himiTextStyle}&HimiReactNative 系列教程&/Text&
&&&&&&&&&TabNavigatortabBarStyle={styles.tab} &
&&&&&&&&&&&&&TabNavigator.Item
&&&&&&&&&&&&selected={this.state.selectedTab === 'home'}
&&&&&&&&&&&&title=&Home&
&&&&&&&&&&&&renderIcon={() =& &Image source={require('./res/home_normal.png')} /&}
&&&&&&&&&&&&renderSelectedIcon={() =& &Image source={require('./res/home_focus.png')} /&}
&&&&&&&&&&&&badgeText=&61&
&&&&&&&&&&&&onPress={() =& this.setState({ selectedTab: 'home' })}&
&&&&&&&&&Viewstyle={{flex:1,backgroundColor:'#fff',justifyContent:'center'}}&
&&&&&&&& &&&Text style={{fontSize:20}}&我是第一个选项卡，直接书写出的视图!&/Text&
&&&&&&&&&/View&
&&&&&&&&&&&&&/TabNavigator.Item&
&&&&&&&&&&&&&TabNavigator.Item
&&&&&&&&&&&&selected={this.state.selectedTab === 'profile'}
&&&&&&&&&&&&title=&Profile&
&&&&&&&&&&&&renderIcon={() =& &Image source={require('./res/personal_normal.png')} /&}
&&&&&&&&&&&&renderSelectedIcon={() =& &Image source={require('./res/personal_focus.png')} /&}
&&&&&&&&&&&&onPress={() =& this.setState({ selectedTab: 'profile' })}&
&&&&&&&&&&&&&&&&&TestPage/&
&&&&&&&&&&&&&/TabNavigator.Item&
&&&&&&&&&&&/TabNavigator&
&&&&&&&/View&
var styles = StyleSheet.create({
&&&&&&&&height: 100,
&&&&&&&&backgroundColor: '#eee',
&&&&&&&&alignItems: 'center'
&&&&himiTextStyle:{
&&&&&&backgroundColor:'#eee',
&&&&&&color:'#f00',
&&&&&&fontSize:30,
&&&&&&marginTop:30,
TestPage.js
importReact, { Component } from 'react';
} from 'react-native';
importTabNavigatorfrom 'react-native-tab-navigator';
export default class TestPage extends Component {
constructor(props) {
super(props);
this.state = {
&&&&&&selectedTab:'home'
&&render() {
&&&&return (
&&&&&&&Viewstyle={{flex:1,backgroundColor:'#eee',justifyContent:'center'}}&
&&&&&&&&&&&Text style={{fontSize:20,color:'#f00'}}&我是TestPage，导入使用的!&/Text&
&&&&&&&/View&
效果演示(点击查看动态图)：
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致Sponsered by
React.addons 是为了构建 React 应用而放置的一些有用工具的地方。此功能应当被视为实验性的，但最终将会被添加进核心代码中或者有用的工具库中：
TransitionGroup和CSSTransitionGroup，用于处理动画和过渡，这些通常实现起来都不简单，例如在一个组件移除之前执行一段动画。
LinkedStateMixin，用于简化用户表单输入数据和组件 state 之间的双向数据绑定。
classSet，用于更加干净简洁地操作 DOM 中的 class 字符串。
cloneWithProps，用于实现 React 组件浅复制，同时改变它们的 props 。
update，一个辅助方法，使得在 JavaScript 中处理不可变数据更加容易。
PureRednerMixin，在某些场景下的性能检测器。
以下插件只存在于 React 开发版（未压缩）：
TestUtils， 简单的辅助工具，用于编写测试用例（仅存在于未压缩版）.
Perf，用于性能测评，并帮助你检查出可优化的功能点。
要使用这些插件，需要用 react-with-addons.js （和它的最小化副本）替换常规的React.js。
当通过npm使用react包的时候，只要简单地用 require('react/addons') 替换 require('react') 来得到带有所有插件的React。Github Atom 将改用 React 编辑器，提升性能 - 开源中国社区
当前访客身份：游客 [
当前位置：
Github Atom 将改用 React 编辑器，提升性能
来自 Github Atom 官方博客的：Atom 已经有了一个新的编辑器组件，该组件将在未来几周内发布的版本中默认被启用。也可以通过如下的设置界面启用该编辑器。对 Atom 团队来说，性能的最高优先级的。在过去一段时间内，团队主要经历是让基本的文本编辑更加平滑和更好的响应速度。在经过一段时间的工作后，我们还是决定重写整个编辑器组件的视图层。更多关于这次重构编辑器的介绍请看。
Github Atom 的详细介绍：
Github Atom 的下载地址：
想通过手机客户端（支持 Android、iPhone 和 Windows Phone）访问开源中国：
旧一篇： 2年前
新一篇： 2年前
相关讨论话题
你也许会喜欢
我一直觉得 ATOM 的 试图 挺好的。
2楼：重庆崽儿 来自
试图层是什么东西。
3楼：langman521
是“视图”？
4楼：像猫一样生活
在Mac上不支持中文。
5楼：wxpier
我问个小白问题？什么是atom?
6楼：KaMeTang
08:41 (非会员)
對 Atom 團隊來說，性能&的&最高優先級的是否有錯字＠＠
开源软件很不错，但是每当用在生产时，终究没有付费软件的体验好，总让人觉得差了一点点。譬如ATOM和Sublime Text
8楼：bobshi
引用来自“N3i1”的评论开源软件很不错，但是每当用在生产时，终究没有付费软件的体验好，总让人觉得差了一点点。譬如ATOM和Sublime Text心理作用。。
9楼：eechen
引用来自“N3i1”的评论开源软件很不错，但是每当用在生产时，终究没有付费软件的体验好，总让人觉得差了一点点。譬如ATOM和Sublime TextLinux版Sublime Text无法调用中文输入法,有人向作者指出问题提交补丁也不接受,直到现在还没有解决,这能称得上体验好?
10楼：eechen
Linux上Geany这款高级文本编辑器不错,推荐使用.
11楼：今天天气不错 来自
就给我尝尝鲜吧
12楼：币须网
引用来自“N3i1”的评论开源软件很不错，但是每当用在生产时，终究没有付费软件的体验好，总让人觉得差了一点点。譬如ATOM和Sublime Text引用来自“bobshi”的评论心理作用。。还真不是心理作用，以前我也用ST，但是现在只用WebStorm了
13楼：晒工资
只用phpstorm
14楼：铂金眼
引用来自“N3i1”的评论开源软件很不错，但是每当用在生产时，终究没有付费软件的体验好，总让人觉得差了一点点。譬如ATOM和Sublime Text引用来自“eechen”的评论Linux版Sublime Text无法调用中文输入法,有人向作者指出问题提交补丁也不接受,直到现在还没有解决,这能称得上体验好?Sublime Text是闭源软件
15楼：卢温禾
“对 Atom 团队来说，性能的最高优先级的。”不觉明厉
16楼：後方之水
引用来自“eechen”的评论Linux上Geany这款高级文本编辑器不错,推荐使用.geany+1
17楼：Windoze
引用来自“N3i1”的评论开源软件很不错，但是每当用在生产时，终究没有付费软件的体验好，总让人觉得差了一点点。譬如ATOM和Sublime Text引用来自“eechen”的评论Linux版Sublime Text无法调用中文输入法,有人向作者指出问题提交补丁也不接受,直到现在还没有解决,这能称得上体验好?ATOM貌似还没有Linux版吧
18楼：老刘__
vi党表示除了vi其它全是渣渣
19楼：tsl0922
换 React 后，确实感觉编辑器快了些！已经把 Atom 当做主编辑器/IDE 使用一个多月，完全够用了！Atom 的内存占用是真的很低。
20楼：李星
好像不支持编码转换吧?
与内容无关的评论将被删除，严重者禁用帐号
本周热点资讯
本站最新资讯写react 用什么 Sublime 插件_百度知道
写react 用什么 Sublime 插件
用组合键ctrl+shift+p首先当然要安装Sublime Text,打开Package Control面板 输入install package,进入面板 Type jedi and select “SublimeJEDI” cd ~/.config/sublime-text-2&#47.不是吗 然后进入正题，有以下两个方式，惊醒jedi的安装了
知道智能回答机器人
我是知道站内的人工智能，可高效智能地为您解答问题。很高兴为您服务。
其他类似问题
为您推荐：
react的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁React（35）
React.addons是为了构建 React应用而放置的一些有用工具的地方。此功能应当被视为实验性的，但最终将会被添加进核心代码中或者有用的工具库中：
TransitionGroup和CSSTransitionGroup，用于处理动画和过渡，这些通常实现起来都不简单，例如在一个组件移除之前执行一段动画。
LinkedStateMixin，用于简化用户表单输入数据和组件 state之间的双向数据绑定。
classSet，用于更加干净简洁地操作 DOM中的
class字符串。
cloneWithProps，用于实现 React组件浅复制，同时改变它们的
update，一个辅助方法，使得在 JavaScript中处理不可变数据更加容易。
PureRenderMixin，在某些场景下的性能检测器。
以下插件只存在于 React开发版（未压缩）：
TestUtils，简单的辅助工具，用于编写测试用例（仅存在于未压缩版）.
Perf，用于性能测评，并帮助你检查出可优化的功能点。
要使用这些插件，需要用react-with-addons.js（和它的最小化副本）替换常规的React.js。
当通过npm使用react包的时候，只要简单地用
require('react/addons') 替换 require('react')来得到带有所有插件的React。
React为动画提供了一个ReactTransitionGroup插件组件作为一个底层的API，一个ReactCSSTrasitionGroup来简单的实现基本的CSS动画和过渡。
高级API：ReactCSSTransitionGroup
ReactCSSTransitionGroup是基于ReactTransitionGroup的，在React组件进入或者离开DOM的时候，它是一种简单地执行CSS过渡和动画的方式。这个的灵感来自于优秀的库。
ReactCSSTransitionGroup是ReactTransitions的接口。这是一个简单的元素，包含了所有你对其动画感兴趣的组件。这里是一个例子，例子中我们让列表项淡入淡出：
& var ReactCSSTransitionGroup =React.addons.CSSTransitionG
var TodoList =React.createClass({
& getInitialState: function() {
&&& return {items: ['hello', 'world', 'click','me']};
& handleAdd: function() {
&&& var newItems =
&&&&& this.state.items.concat([prompt('Entersome text')]);
&&& this.setState({items: newItems});
& handleRemove: function(i) {
&&& var newItems = this.state.
&&& newItems.splice(i, 1);
&&& this.setState({items: newItems});
& render: function() {
&&& var items =this.state.items.map(function(item, i) {
&&&&& return (
&&&&&&& &div key={item}onClick={this.handleRemove.bind(this, i)}&
&&&&&&&&& {item}
&&&&&&& &/div&
&&& }.bind(this));
&&& return (
&&&&& &div&
&&&&&&& &buttononClick={this.handleAdd}&Add Item&/button&
&&&&&&& &ReactCSSTransitionGrouptransitionName=&example&&
&&&&&&&&& {items}
&&&&&&& &/ReactCSSTransitionGroup&
&&&&& &/div&
PS：你必须为ReactCSSTransitionGroup的所有子级提供键属性，即使只渲染一项。这就是？React确定哪一个子级插入了，移除了，或者停留在那里。
在这个组建里，当一个心啊的项被添加到ReactCSSTransitionGroup，他将会添加example-enter类，然后下一时刻被添加example-enter-active
CSS类。这是一个给予transitionNameProp的约定。
可以是哦能给这些类出发一个CSS动画或者过渡，例如，尝试添加这段CSS代码，然后插入一个新的列表项：
.example-enter {
& opacity: 0.01;
& transition: opacity .5s ease-
.example-enter.example-enter-active{
& opacity: 1;
你可以注意到当你尝试一处一项的时候，ReactCSSTransitionGroup保持这项在DOM里。如果你正使用一个带有插件的未压缩的React构建版本，你将会看到一条警告，React期待一次动火或者过度发生，那是因为ReactCSSTransitionGroup保持你的DOM元素一直在页面上，知道动画完成，尝试添加下面这段CSS代码：
.example-leave {
& opacity: 1;
& transition: opacity .5s ease-
.example-leave.example-leave-active{
& opacity: 0.01;
一组动画必须要挂载了才可以生效：
为了能过给它的子级应用过渡效果，ReactCSSTransitionGroup必须已经挂载到饿了DOM，下面的例子不会生效，因为ReactCSSTransitionGroup
被挂在到先新项，而不是新项被挂载到ReactCSSTransitionGroup里。
& render: function() {
&&& var items =this.state.items.map(function(item, i) {
&&&&& return (
&&&&&&& &div key={item}onClick={this.handleRemove.bind(this, i)}&
&&&&&&&&& &ReactCSSTransitionGrouptransitionName=&example&&
&&&&&&&&&&& {item}
&&&&&&&&& &/ReactCSSTransitionGroup&
&&&&&&& &/div&
&&& }, this);
&&& return (
&&&&& &div&
&&&&&&& &buttononClick={this.handleAdd}&Add Item&/button&
&&&&&&& {items}
&&&&& &/div&
让一项或者零项动起来（AnimatingOne or Zero Items）
虽然在上面的例子中，我们渲染了一个项目列表到ReactCSSTransitionGroup里，ReactCSSTransitionGroup的子级可以是一个或零个项目。这使它能够让一个元素实现进入和离开的动画。同样，你可以通过移动一个新的元素来替换当前元素。随着新元素的移入，当前元素移出。例如，我们可以由此实现一个简单的图片轮播器：
varReactCSSTransitionGroup = React.addons.CSSTransitionG
var ImageCarousel =React.createClass({
& propTypes: {
&&& imageSrc: React.PropTypes.string.isRequired
& render: function() {
&&& return (
&&&&& &div&
&&&&&&& &ReactCSSTransitionGrouptransitionName=&carousel&&
&&&&&&&&& &img src={this.props.imageSrc}key={this.props.imageSrc} /&
&&&&&&& &/ReactCSSTransitionGroup&
&&&&& &/div&
如果你想，你可以禁用入场或者出场动画。例如，有些时候，你可能想要一个入场动画，不要出场动画，但是ReactCSSTransitionGroup会在移除DOM节点之前等待一个动画完成。你可以给ReactCSSTransitionGroup添加transitionEnter={false}或者transitionLeave={false}&props来禁用这些动画.
当使用ReactCSSTransitionGroup的时候，没有办法通知你在过渡效果结束或者在执行动画的时候做一些复杂的运算。如果你想要更多细粒度的控制，你可以使用底层的ReactTransitionGroup&API，该API提供了你自定义过渡效果所需要的函数。
底层的API：ReactTransitionGroup
ReactTransitionGroup是动画的基础。它可以通过React.addons.TransitionGroup得到。当子级被添加或者从其中移除（就像上面的例子）的时候，特殊的生命周期函数就会在它们上面被调用。
componentWillEnter(callback)
在组件被添加到已有的TransitionGroup中的时候，该函数和componentDidMount()被同时调用。这将会阻塞其它动画触发，直到callback被调用。该函数不会在TransitionGroup初始化渲染的时候调用。
componentDidEnter()
该函数在传给componentWillEnter的callback函数被调用之后调用。
componentWillLeave(callback)
该函数在子级从ReactTransitionGroup中移除的时候调用。虽然子级被移除了，ReactTransitionGroup将会使它继续在DOM中，直到callback被调用。
componentDidLeave()
该函数在willLeave&callback被调用的时候调用（与componentWillUnmount是同一时间）。
渲染一个不同的组件
默认情况下ReactTransitionGroup渲染一个span。你可以通过提供一个component&prop来改变这种行为。例如，以下是你将如何渲染一个&ul&：
&ReactTransitionGroup component=&ul&&
&/ReactTransitionGroup&
每一个React能渲染的DOM组件都是可用的。但是，组件并不需要是一个DOM组件。它可以是任何你想要的React组件；甚至是你自己已经写好的！
v0.12之前，当使用DOM组件的时候，组件&prop需要是一个指向React.DOM.*的引用。既然组件简单地传递到了React.createElement，它必须是一个字符串。组装的组件必须传递构造函数。
任何额外的、用户定义的属性将会成为已渲染的组件的属性。例如，以下是你将如何渲染一个带有css类的&ul&：
&ReactTransitionGroup component=&ul&
className=&animated-list&&
&/ReactTransitionGroup&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：28398次
积分：1228
积分：1228
排名：千里之外
原创：75篇
转载：39篇
(3)(1)(6)(26)(82)}