Tabs 标签页
1.主要用来做选项切换作用
Tabs样式
- ant design官方文档中有一个简单的例子 ，
import React from 'react';
import { ScrollView, Text, View } from 'react-native';
import { Tabs } from '@ant-design/react-native';
const renderContent = (tab, index) => {
const style = {
paddingVertical: 40,
justifyContent: 'center',
alignItems: 'center',
margin: 10,
backgroundColor: '#ddd',
};
const content = [1, 2, 3, 4, 5, 6, 7, 8].map(i => {
return (
<View key={`${index}_${i}`} style={style}>
<Text>
{tab.title} - {i}
</Text>
</View>
);
});
return <ScrollView style={{ backgroundColor: '#fff' }}>{content}</ScrollView>;
};
export default class BasicTabsExample extends React.Component {
render() {
const tabs = [
{ title: 'First Tab' },
{ title: 'Second Tab' },
{ title: 'Third Tab' },
];
const tabs2 = [
{ title: '1st Tab' },
{ title: '2nd Tab' },
{ title: '3rd Tab' },
{ title: '4th Tab' },
{ title: '5th Tab' },
{ title: '6th Tab' },
{ title: '7th Tab' },
{ title: '8th Tab' },
{ title: '9th Tab' },
];
const style = {
alignItems: 'center',
justifyContent: 'center',
height: 150,
backgroundColor: '#fff',
};
return (
<View style={{ flex: 1 }}>
<Tabs tabs={tabs}>
<View style={style}>
<Text>Content of First Tab</Text>
</View>
<View style={style}>
<Text>Content of Second Tab</Text>
</View>
<View style={style}>
<Text>Content of Third Tab</Text>
</View>
</Tabs>
<View style={{ flex: 2 }}>
<Tabs tabs={tabs2} initialPage={1} tabBarPosition="top">
{renderContent}
</Tabs>
</View>
</View>
);
}
}
export const title = 'Tabs';
export const description = 'Tabs example';
renderTabBar 自定义TabBar
renderTabBar官方文档说明
1.目的：使用tabs组件 ，自定义renderTabBar
修改TabBar最终效果
2.引用组件展示出的默认效果 ,默认效果很好，但是tabbar无法该表 ，你要改变效果，就要用到renderTabBar属性
默认效果
import React from 'react';
import { Text, View , StyleSheet } from 'react-native';
import { Tabs } from '@ant-design/react-native';
import globalStyle from '../../../globalStyle'
export default class BasicTabsExample extends React.Component {
constructor(props) {
super(props)
this.state = {
tabs: [
{ title: '学习总时长' },
{ title: '单词速记' },
{ title: '同步课程' },
{ title: '互动语法' },
{ title: '习题冲刺' },
]
}
}
render() {
const { tabs } = this.state
return (
<View style={{ flex: 1 }}>
<Tabs tabs={tabs} >
<View style={styles.learnView}>
<Text>Content of 学习总时长</Text>
</View>
<View style={styles.learnView}>
<Text>Content of 单元速记</Text>
</View>
<View style={styles.learnView}>
<Text>Content of 同步课程</Text>
</View>
<View style={styles.learnView}>
<Text>Content of 互动语法</Text>
</View>
<View style={styles.learnView}>
<Text>Content of 习题冲洗</Text>
</View>
</Tabs>
</View>
);
}
}
const styles = StyleSheet.create({
learnView: {
alignItems: 'center',
justifyContent: 'center',
height: 150,
backgroundColor: '#fff',
},
container: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
paddingVertical: 10
},
tabBtn: {
width: "25%",
paddingVertical: 5,
paddingHorizontal: 40,
alignItems: "center",
borderWidth: 1,
borderColor: globalStyle.color.primary
},
})
export const title = 'Tabs';
export const description = 'Tabs example';
3.引用tabbar组件， 在此我是把组件单独的抽离出来了 ， 如果简单的话，也可以不抽离 ， 但是ReactNative是推荐使用组建化的。
使用renderTabBar后的效果
import ChartTabBar from "../childrenPages/learnReport/ChartTabBar";
render() {
const { tabs } = this.state
return (
<View style={{ flex: 1 }}>
<Tabs tabs={tabs}
renderTabBar={(props) =>
<ChartTabBar
{...props}
goToTab={(index) => true}
>
</ChartTabBar>
}
>
<View style={styles.learnView}>
<Text>Content of 学习总时长</Text>
</View>
<View style={styles.learnView}>
<Text>Content of 单元速记</Text>
</View>
<View style={styles.learnView}>
<Text>Content of 同步课程</Text>
</View>
<View style={styles.learnView}>
<Text>Content of 互动语法</Text>
</View>
<View style={styles.learnView}>
<Text>Content of 习题冲洗</Text>
</View>
</Tabs>
</View>
);
}
- ChartTabbar 组件 （名称自拟）
import React, { Component } from "react";
import { View, TouchableOpacity, StyleSheet, Text } from "react-native";
import globalStyle from "../../../../globalStyle";
/**
* 学习统计中的TabBar , 删除了些样式的代码
*/
export default class ChartTabBar extends Component {
constructor(props) {
super(props);
this.state = {
}
}
_renderTabs=(item, index)=> {
const { goToTab } = this.props;
return (
<TouchableOpacity
key={index}
onPress={() => goToTab(index)}
style={[
styles.tabBtn,
]}
>
<Text style={{ color: textColor }}>{item.title}</Text>
</TouchableOpacity>
);
}
render() {
/**
* tabs 存放每一项内容的标题的数组
*/
const { tabs } = this.props;
return (
<View style={styles.container}>
{tabs.map(this._renderTabs)}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
paddingVertical: 10
},
tabBtn: {
paddingVertical: 5,
paddingHorizontal: 40,
alignItems: "center",
borderWidth: 1,
borderColor: globalStyle.color.primary
},
});
Tabs.DefaultTabBar
-
goToTab 用法
>tabs.DefaultTabBar中的属性都能在此引用，相当于传参 ，传到tabbar页面
goToTab 1.bug 你可能发生 当代码能够运行的时候 ， 可能会出现点击TabBar时不能切换下面的内容，但是左右滑动的下面的时候，上面的tabbar会跟着动，
1.解决：应该是因为渲染的的顺序的问题，改变一下渲染的位置问题得以解决，（反正我是）
<Tabs tabs={tabs}
renderTabBar={(props) =>
<ChartTabBar
goToTab={(index) => true}
{...props}
>
</ChartTabBar>
}
>
4.把3中的tabBar下划线去掉 ， 使用 tabBarUnderlineStyle 属性 发现不行 ，因为这可以去掉默认renderTabBar的下滑线 ，但是自定义的去不掉 。
所以使用 renderUnderline
<Tabs tabs={tabs}
renderTabBar={(props) =>
<ChartTabBar
goToTab={(index) => true}
{...props}
>
</ChartTabBar>
}
renderUnderline={() => null}
styles={{
topTabBarSplitLine: {
borderBottomWidth: 0,
},
}}
>
完成
总代码
index.js
import React from 'react';
import { Text, View } from 'react-native';
import { Tabs } from '@ant-design/react-native';
import StyleSheet from '../../../globalStyle/StyleSheet'
import globalStyle from '../../../globalStyle'
import ChartTabBar from "../childrenPages/learnReport/ChartTabBar";
export default class BasicTabsExample extends React.Component {
constructor(props) {
super(props)
this.state = {
tabs: [
{ title: '学习总时长' },
{ title: '单词速记' },
{ title: '同步课程' },
{ title: '互动语法' },
{ title: '习题冲刺' },
]
}
}
render() {
const { tabs } = this.state
return (
<View style={{ flex: 1 }}>
<Tabs tabs={tabs}
renderTabBar={(props) =>
<ChartTabBar
goToTab={(index) => true}
{...props}
>
</ChartTabBar>
}
renderUnderline={() => null}
styles={{
topTabBarSplitLine: {
borderBottomWidth: 0,
},
}}
>
<View style={styles.learnView}>
<Text>Content of 学习总时长</Text>
</View>
<View style={styles.learnView}>
<Text>Content of 单元速记</Text>
</View>
<View style={styles.learnView}>
<Text>Content of 同步课程</Text>
</View>
<View style={styles.learnView}>
<Text>Content of 互动语法</Text>
</View>
<View style={styles.learnView}>
<Text>Content of 习题冲洗</Text>
</View>
</Tabs>
</View>
);
}
}
const styles = StyleSheet.create({
learnView: {
alignItems: 'center',
justifyContent: 'center',
height: 150,
backgroundColor: '#fff',
},
container: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
paddingVertical: 10
},
tabBtn: {
width: "25%",
paddingVertical: 5,
paddingHorizontal: 40,
alignItems: "center",
borderWidth: 1,
borderColor: globalStyle.color.primary
},
})
export const title = 'Tabs';
export const description = 'Tabs example';
ChartTabBar页面
import React, { Component } from "react";
import { View, TouchableOpacity, StyleSheet, Text } from "react-native";
import globalStyle from "../../../../globalStyle";
/**
* 学习统计中的TabBar
*/
export default class ChartTabBar extends Component {
constructor(props) {
super(props);
this.state = {
}
}
_renderTabs=(item, index)=> {
const { activeTab, goToTab , tabs} = this.props;
let borderStyle = null;
let backgroundColor = null;
let textColor = null;
if (index === 0) {
borderStyle = styles.rightBorder;
} else if (index === tabs.length -1) {
borderStyle = styles.leftBorder;
} else {
borderStyle = styles.centerBorder;
}
if (activeTab === index) {
backgroundColor = globalStyle.color.primary;
textColor = '#fff';
} else {
backgroundColor = "#fff";
textColor = globalStyle.color.primary;
}
return (
<TouchableOpacity
key={index}
onPress={() => goToTab(index)}
style={[
styles.tabBtn,
borderStyle,
{ backgroundColor: backgroundColor }
]}
>
<Text style={{ color: textColor }}>{item.title}</Text>
</TouchableOpacity>
);
}
render() {
/**
* tabs 存放每一项内容的标题的数组
*/
const { tabs } = this.props;
return (
<View style={styles.container}>
{tabs.map(this._renderTabs)}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
paddingVertical: 10
},
tabBtn: {
paddingVertical: 5,
paddingHorizontal: 40,
alignItems: "center",
borderWidth: 1,
borderColor: globalStyle.color.primary
},
centerBorder: {
borderWidth: 1,
borderLeftWidth:0
},
leftBorder: {
borderTopRightRadius: 5,
borderBottomRightRadius: 5,
borderLeftWidth: 0
},
rightBorder: {
borderTopLeftRadius: 5,
borderBottomLeftRadius: 5,
borderRightWidth: 1.01,
}
});
