ReactNative学习第六天 项目底部TabBar和Icon自定义库
昨天我们学了 项目Header+顶部滑动切换
今天刚开始的时候看到了一个库:react-native-vector-icons 自定义矢量图。我研究了一上午,但整体流程还跑不通,无奈先暂时放着,等以后再研究。这个库能适配不同机型,确实挺方便的。有兴趣的同学可以研究下。
http://www.jianshu.com/p/9016703cfe49
关于昨天提到的 react-native-scrollable-tab-view 无法显示内容问题,决定先把这个类屏蔽掉,到时候看下源码再找问题所在。
今天,我主要完成一件事, 底部TabBar切换,虽然我以前一篇博客,介绍的就是底部TabBar切换,但我今天找到了一个更方便的控件:TabBarIOS和NavigatorIOS。
用法挺简单的,导入2张Icon图,修改home.js代码
'use strict';
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
TouchableOpacity,
Navigator,
Text,
View
} from 'react-native';
import Header from './Header';
import HomeContent from './HomeContent';
class HomeNext extends Component {
render() {
return (
第二个页面
)
}
}
export default class Home extends Component {
clickToNext(){
this.props.navigator.push({
title:'详情',
component:HomeNext
})
}
render() {
return (
activeOpacity={0.5}
onPress={this.clickToNext.bind(this)}>
home
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
icon: {
width: 20,
height: 20
}
});
在index.ios.js里进行调用
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
TabBarIOS,
NavigatorIOS,
Text,
View
} from 'react-native';
import Home from './home/Home'
class MyInfo extends Component {
render() {
return (
我的
)
}
}
export default class NewsProject extends Component {
state= {
selectedTab: 'home'
};
render() {
return (
barTintColor='#f9f9f9' //背景色
translucent={true} //半透明
tintColor='red' //前景色
>
renderAsOriginal
title="首页" //标题
icon={require('./images/home.png')}//图标
selectedIcon={require('./images/home.png')}//选中图标
selected = {this.state.selectedTab == 'home'}
onPress = {()=>{this.setState({selectedTab:'home'});}}//点击事件
>
style={{flex: 1}}
initialRoute={{
component: Home, //设置根视图
title:'首页' }}
/>
renderAsOriginal
title="我的" //标题
icon={require('./images/myinfo.png')} //图标
selectedIcon={require('./images/myinfo.png')} //选中图标
selected = {this.state.selectedTab == 'myInfo'}
onPress = {()=>{this.setState({selectedTab:'myInfo'});}}//点击事件
>
style={{flex: 1}}
initialRoute={{
component: MyInfo, //设置根视图
title:'我的' }}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
icon: {
width: 20,
height: 20
}
});
AppRegistry.registerComponent('NewsProject', () => NewsProject);
运行看看
我运行时候遇到一个错误 “React Native, NavigatorIOS, undefined is not an object (evaluating ‘this.props.navigator.push’)”
可以看看 https://stackoverflow.com/questions/31304017/react-native-navigatorios-undefined-is-not-an-object-evaluating-this-props-n