过年开始正式学习React Native,至于React Native是什么,在这就不说废话了,学习的话,可以去React Native中文网:React Native中文网
由于是新的开发方式,官方给的例子又很操蛋,好多控件和API的用法都介绍的很操蛋,所以学习过程中遇到了很多问题,TabBarIOS的使用就是一个,使用了之后push的时候怎么隐藏TabBarIOS,就是重点;
废话不多说,上代码:
1.这是在路口类index.iOS.js里的调用
- 'use strict';
- import HomePage from './HomePage'
- import React, {
- AppRegistry,
- Component,
- StyleSheet,
- } from 'react-native';
-
- class XGTabbarDemo extends Component {
- render (){
- return (
- <HomePage style={{flex:1}} />
- );
- }
- }
-
- AppRegistry.registerComponent('XGTabbarDemo', () => XGTabbarDemo);
2.这是设置有TabBarIOS页面
- // HomePage 有TabBarIOS页面
- // create by 小广
- 'use strict';
- import React, {
- View ,
- Component,
- StyleSheet,
- Navigator,
- TabBarIOS,
- } from 'react-native';
-
- // tabbar的主模块
- import MainVC from './MainVC'
- import SecondVC from './SecondVC'
- import ThreeVC from './ThreeVC'
-
- export default class HomePage extends Component {
- constructor(props) {
- super(props);
- }
-
- render(){
- // Navigator的用法,请参考: http://bbs.reactnative.cn/topic/20
- return (
- <Navigator
- style={{flex:1}}
- initialRoute={{name:'TabbarView',component:TabbarView}}
- renderScene={this._renderNavSubComponent.bind(this)}/>
- );
- }
- // 返回的NavSubComponent
- _renderNavSubComponent(route, navigator){
- var NavSubComponent = route.component;
- if (NavSubComponent) {
- return <NavSubComponent {...route.params} navigator={navigator}/>
- }
- }
- }
-
- // 定义TabbarView
- const tabBarTintColor = '#f8f8f8';// 标签栏的背景颜色
- const tabTintColor = '#3393F2'; // 被选中图标颜色
- const navBarTintColor = '#EEEFF4';//导航条颜色
- const navItemTintColor = '#66666';// 导航条按钮字体颜色
- const navTextColor = '#66666';// 导航条title字体颜色
-
- class TabbarView extends Component{
- constructor(props) {
- super(props);
- this.state = {
- selectedTab:'firstVC',
- };
- }
-
- render(){
- return (
- <TabBarIOS
- ref='tabbar'
- tintColor={tabTintColor}
- barTintColor={tabBarTintColor}>
- {this._createTabbarItem('首页',require('./iconOne.png'),'firstVC')}
- {this._createTabbarItem('第二页',require('./iconTwo.png'),'secondVC')}
- {this._createTabbarItem('第三页',require('./iconThree.png'),'threeVC')}
- </TabBarIOS>
- );
- }
-
- // 创建TabBarIOS.Item
- _createTabbarItem(title,icon,selectedTab){
- return (
- <TabBarIOS.Item
- title={title}
- icon={icon}
- selected={this.state.selectedTab === selectedTab}
- onPress={() => {
- this.setState({
- selectedTab:selectedTab,
- });
- }}>
- {this._renderComponent(this.state.selectedTab)}
- </TabBarIOS.Item>
- );
- }
-
- // 根据selectedTab 确定模块
- _renderComponent(selectedTab){
- if (selectedTab === 'firstVC') {
- return <MainVC navigator={this.props.navigator} />
- } else if (selectedTab === 'secondVC') {
- return <SecondVC navigator={this.props.navigator} />
- } else if (selectedTab === 'threeVC') {
- return <ThreeVC navigator={this.props.navigator} />
- }
- }
- }
有比这个解决方法更好的大神,就留下您的建议
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安装的第三方的使用
;