import React, { Component } from 'react';
import {
AppRegistry,
Dimensions,
StyleSheet,
View,
Text,
Button,
Image,
} from 'react-native';
import { TabNavigator } from "react-navigation";
let ScreenWidth = Dimensions.get('window').width;
let ScreenHeight = Dimensions.get('window').height;
class MyHomeScreen extends React.Component {
static navigationOptions = {
tabBarLabel: '首页',
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./img/t1.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<View><Text>这是第一个页面</Text></View>
);
}
}
class MyNotificationsScreen extends React.Component {
static navigationOptions = {
tabBarLabel: '我的',
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./img/t3.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<View><Text>这是第2个页面</Text></View>
);
}
}
class SearchScreen extends React.Component {
static navigationOptions = {
tabBarLabel: '找房',
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./img/t2.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<View><Text>这是第3个页面</Text></View>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 25,
height: 25,
},
});
const MyApp = TabNavigator(
{
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
Search: {
screen: SearchScreen,
},
},
{
tabBarPosition:"bottom",
swipeEnabled:false,
tabBarOptions: {
activeTintColor: '#333',
inactiveBackgroundColor: "#f1f1f1",//IOS
inactiveTintColor:"#666",
showIcon:true,
labelStyle: {
fontSize: 12,
color:"#666",
},
style: {
borderTopWidth:1,
borderTopColor:'#ccc',
backgroundColor: '#f1f1f1', //android
},
indicatorStyle:{
height:0,
},
},
}
);
module.exports = MyApp;
React-Native 底部切换卡(安卓)开发
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 写在前面 既然React-Native纯js开发已经搭建完毕,怎么也得搞一搞两个的混合开发,毕竟人家原生的优势在那...
- 图标生成 1.生成图标资源( 不会偷懒的程序员,不是好程序员 ) 1.打开 http://makeappicon....
- 翻译自:官网原文在运行React Native安卓应用时,需要一个安卓模拟器。这个指南用于描述基本的安卓开发环境安...
