123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135 |
- import React from 'react';
- import { ScrollView, Text, View, TouchableOpacity } 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>
- <Text style={{ margin: 16 }}>Custom RenderTabBar</Text>
- <Tabs
- tabs={tabs}
- renderTabBar={tabProps => (
- <View
- style={{
- paddingHorizontal: 16,
- flexDirection: 'row',
- alignItems: 'center',
- justifyContent: 'space-evenly',
- }}
- >
- {tabProps.tabs.map((tab, i) => (
- // change the style to fit your needs
- <TouchableOpacity
- activeOpacity={0.9}
- key={tab.key || i}
- style={{
- // width: '30%',
- padding: 6,
- }}
- onPress={() => {
- const { goToTab, onTabClick } = tabProps;
- // tslint:disable-next-line:no-unused-expression
- onTabClick && onTabClick(tabs[i], i);
- // tslint:disable-next-line:no-unused-expression
- goToTab && goToTab(i);
- }}
- >
- <Text
- style={{
- color: tabProps.activeTab === i ? 'green' : undefined,
- }}
- >
- {tab.title}
- </Text>
- </TouchableOpacity>
- ))}
- </View>
- )}
- >
- <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';
- // fetch(uploadURL,{
- // method:'POST',
- // headers:{
- // 'Content-Type':'multipart/form-data',
- // },
- // body:formData,
- // })
- // .then((response) => response.text() )
- // .then((responseData)=>{
- //
- // console.log('responseData',responseData);
- // })
- // .catch((error)=>{console.error('error',error)});
|