React Native学习之TabBarIOS用法 React Native 解决iOS上键盘遮挡TextInput问题

过年开始正式学习React Native,至于React Native是什么,在这就不说废话了,学习的话,可以去React Native中文网:React Native中文网

由于是新的开发方式,官方给的例子又很操蛋,好多控件和API的用法都介绍的很操蛋,所以学习过程中遇到了很多问题,TabBarIOS的使用就是一个,使用了之后push的时候怎么隐藏TabBarIOS,就是重点;

废话不多说,上代码:

1.这是在路口类index.iOS.js里的调用

[html]  view plain  copy

 

1. 'use strict';  
2. import HomePage from './HomePage'  
3. import React, {  
4.  AppRegistry,  
5.  Component,  
6.  StyleSheet,  
7. } from 'react-native';  
8.   
9. class XGTabbarDemo extends Component {  
10.   render (){  
11.     return (  
12.       <HomePage style={{flex:1}} />  
13.     );  
14.   }  
15. }  
16.   
17. AppRegistry.registerComponent('XGTabbarDemo', () => XGTabbarDemo);  

2.这是设置有TabBarIOS页面

[html]  view plain  copy

 

1. // HomePage 有TabBarIOS页面  
2. // create by 小广  
3. 'use strict';  
4. import React, {  
5.   View ,  
6.   Component,  
7.   StyleSheet,  
8.   Navigator,  
9.   TabBarIOS,  
10. } from 'react-native';  
11.   
12. // tabbar的主模块  
13. import MainVC from './MainVC'  
14. import SecondVC from './SecondVC'  
15. import ThreeVC from './ThreeVC'  
16.   
17. export default class HomePage extends Component {  
18.   constructor(props) {  
19.     super(props);  
20.   }  
21.   
22.   render(){  
23.     // Navigator的用法,请参考: http://bbs.reactnative.cn/topic/20  
24.     return (  
25.       <Navigator  
26.         style={{flex:1}}  
27.         initialRoute={{name:'TabbarView',component:TabbarView}}  
28.         renderScene={this._renderNavSubComponent.bind(this)}/>  
29.     );  
30.   }  
31.   // 返回的NavSubComponent  
32.   _renderNavSubComponent(route, navigator){  
33.     var NavSubComponent = route.component;  
34.     if (NavSubComponent) {  
35.       return <NavSubComponent {...route.params} navigator={navigator}/>  
36.     }  
37.   }  
38. }  
39.   
40. // 定义TabbarView  
41. const tabBarTintColor = '#f8f8f8';// 标签栏的背景颜色  
42. const tabTintColor = '#3393F2'; // 被选中图标颜色  
43. const navBarTintColor = '#EEEFF4';//导航条颜色  
44. const navItemTintColor = '#66666';// 导航条按钮字体颜色  
45. const navTextColor = '#66666';// 导航条title字体颜色  
46.   
47. class TabbarView extends Component{  
48.   constructor(props) {  
49.     super(props);  
50.     this.state = {  
51.       selectedTab:'firstVC',  
52.     };  
53.   }  
54.   
55.   render(){  
56.     return (  
57.       <TabBarIOS  
58.         ref='tabbar'  
59.         tintColor={tabTintColor}  
60.         barTintColor={tabBarTintColor}>  
61.        {this._createTabbarItem('首页',require('./iconOne.png'),'firstVC')}  
62.        {this._createTabbarItem('第二页',require('./iconTwo.png'),'secondVC')}  
63.        {this._createTabbarItem('第三页',require('./iconThree.png'),'threeVC')}  
64.       </TabBarIOS>  
65.     );  
66.   }  
67.   
68.   // 创建TabBarIOS.Item  
69.   _createTabbarItem(title,icon,selectedTab){  
70.     return (  
71.       <TabBarIOS.Item  
72.         title={title}  
73.         icon={icon}  
74.         selected={this.state.selectedTab === selectedTab}  
75.         onPress={() => {  
76.           this.setState({  
77.             selectedTab:selectedTab,  
78.           });  
79.         }}>  
80.         {this._renderComponent(this.state.selectedTab)}  
81.       </TabBarIOS.Item>  
82.     );  
83.   }  
84.   
85.   // 根据selectedTab 确定模块  
86.   _renderComponent(selectedTab){  
87.     if (selectedTab === 'firstVC') {  
88.       return <MainVC navigator={this.props.navigator} />  
89.     } else if (selectedTab === 'secondVC') {  
90.       return <SecondVC navigator={this.props.navigator} />  
91.     } else if (selectedTab === 'threeVC') {  
92.       return <ThreeVC navigator={this.props.navigator} />  
93.     }  
94.   }  
95. }  

有比这个解决方法更好的大神,就留下您的建议

React Native 键盘遮挡TextInput问题的问题,在安卓上,FB已经处理,但是iOS上,仍未解决;

之前开发纯iOS代码的时候,用了一个解决textfiled被键盘遮挡的第三方,IQKeyboardManager,

于是乎把它引进了项目中,瞧一瞧效果,结果完美解决键盘遮挡的问题;

估计以后FB解决iOS键盘遮挡问题,也会是和IQKeyboardManager原理一样;

IQKeyboardManager地址:https://github.com/hackiftekhar/IQKeyboardManager

ps:建议cocoaPods安装,这样更快捷,安装好之后,啥都不用设置,就生效了;

不会安装cocoaPods的童鞋可以参考这篇文章:http://blog.csdn.net/syg90178aw/article/details/47613859

栗子如图:(其中的红色的TextInput是写在ScrollView外面的)

ps:新的React Native项目安装cocoaPods,会有警告,栗子:

The `XGKeyboard [Release]` target overrides the `OTHER_LDFLAGS` build setting defined in `Pods/Target Support Files/Pods/Pods.release.xcconfig'. This can lead to problems with the CocoaPods installation;
解决方法:打开你项目的 Target -> Build Settings -> Other linker flags ->双击添加  $(inherited)

这样就行了; 若果这个警告不解决的话,会影响pod安装的第三方的使用 ;