107 lines
2.7 KiB
JavaScript
107 lines
2.7 KiB
JavaScript
|
import * as React from 'react';
|
||
|
import { Button, StyleSheet, Text, View } from 'react-native';
|
||
|
import { NavigationContainer } from '@react-navigation/native';
|
||
|
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
|
||
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||
|
import { WebView } from 'react-native-webview'
|
||
|
import { StatusBar } from 'expo-status-bar';
|
||
|
|
||
|
const Tab = createMaterialTopTabNavigator();
|
||
|
|
||
|
|
||
|
export default function App() {
|
||
|
|
||
|
|
||
|
const [tabs, setTabs] = React.useState([
|
||
|
{
|
||
|
name : "tab-1",
|
||
|
component : TabScreen,
|
||
|
}
|
||
|
])
|
||
|
|
||
|
|
||
|
const addNewTab = () => {
|
||
|
setTabs(tabs => [
|
||
|
...tabs,
|
||
|
{
|
||
|
name : "tab-" + (parseInt(tabs.pop().name.replace("tab-", "")) + 1),
|
||
|
component : TabScreen,
|
||
|
}
|
||
|
])
|
||
|
}
|
||
|
|
||
|
|
||
|
const remove = (route) => {
|
||
|
setTabs(tabs => tabs.filter(tab => tab.name !== route.name))
|
||
|
}
|
||
|
|
||
|
|
||
|
function TabScreen({route}) {
|
||
|
return (
|
||
|
<SafeAreaView style={S.container}>
|
||
|
<WebView
|
||
|
onError={() => Alert.alert("Page failed to load", "The page you're trying to view has failed to load. Either caused by a connection error or the a server-side issue.", [{text: 'OK'}])}
|
||
|
source={{ uri: 'https://design.penpot.app' }}
|
||
|
javaScriptEnabled={true}
|
||
|
javaScriptEnabledAndroid={true}
|
||
|
onMessage={(event) => {}}
|
||
|
scalesPageToFit={false}
|
||
|
allowsBackForwardNavigationGestures
|
||
|
/>
|
||
|
<Button
|
||
|
title="Add a new tab"
|
||
|
style={S.AddButton}
|
||
|
onPress={addNewTab}
|
||
|
></Button>
|
||
|
{
|
||
|
route.name !== "tab-1" && <Text onPress={() => remove(route)}>close me</Text>
|
||
|
}
|
||
|
</SafeAreaView>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
const S = StyleSheet.create({
|
||
|
container: {
|
||
|
flex: 1,
|
||
|
position: 'relative'
|
||
|
},
|
||
|
AddButton: {
|
||
|
position: 'absolute',
|
||
|
bottom: 0,
|
||
|
right: 0,
|
||
|
left: 0,
|
||
|
height: 100,
|
||
|
borderWidth: 2,
|
||
|
borderColor: 'blue',
|
||
|
backgroundColor: 'white',
|
||
|
display: 'flex',
|
||
|
alignItems: 'center',
|
||
|
justifyContent: 'center',
|
||
|
}
|
||
|
})
|
||
|
|
||
|
return (
|
||
|
<NavigationContainer>
|
||
|
<Tab.Navigator styles={S.Tab}>
|
||
|
{
|
||
|
tabs.map(tab => <Tab.Screen
|
||
|
key={tab.name}
|
||
|
name={tab.name}
|
||
|
component={tab.component}
|
||
|
options={{
|
||
|
headerTitle: (props) => <LogoTitle {...props} />,
|
||
|
headerRight: () => (
|
||
|
<Button
|
||
|
onPress={() => alert('This is a button!')}
|
||
|
title="Info"
|
||
|
color="#fff"
|
||
|
/>
|
||
|
),
|
||
|
}}
|
||
|
/>)
|
||
|
}
|
||
|
</Tab.Navigator>
|
||
|
</NavigationContainer>
|
||
|
);
|
||
|
}
|