如何在react js中为单独的.tsx文件创建堆栈导航选项卡？
如何在react js中为单独的.tsx文件创建堆栈导航选项卡？
提问于 2020-07-09 06:38:11
在我的应用程序开始时，屏幕底部有两个标签(这两个标签来自我从Expo下载的react js模板)。我做了一个新的屏幕，叫做主页，现在我想在底部复制相同的标签，但我不知道怎么做。我尝试使用堆栈导航器，但它不起作用。
我想让它看起来像这样
这是我的homescreen代码
import * as React from 'react';
import { StyleSheet, Button, TextInput } from 'react-native';
import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import FAQ_Screen from './FAQ_Screen';
import NewsScreen from './NewsScreen';
import { createStackNavigator } from '@react-navigation/stack';
import BottomTabNavigator from '../navigation/BottomTabNavigator';
import NotFoundScreen from './NotFoundScreen';
const Stack = createStackNavigator();
export default function HomeScreen() {
return (
<View style={styles.container}>
<Text> Home </Text>
<select>
<option> Station 1 </option>
<option> Staton 2 </option>
</select>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 20,
fontWeight: 'bold',
},
separator: {
marginVertical: 30,
height: 1,
width: '80%',
},
});回答 1
Stack Overflow用户
发布于 2020-07-09 06:58:30
您应该在Tab.Navigator中声明选项卡。
这些屏幕可以是单独的.tsx或js文件。我使用了js，以便能够使用世博会进行展示。但是，ts/js不会改变行为。
我做了一个工作示例：
https://snack.expo.io/@mayconjcm/tab-navigation-%7C-react-navigation
你也可以在这里看到代码：
主页：
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeTab from './Tab1';
import SettingsTab from './Tab2';
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeTab} />
<Tab.Screen name="Settings" component={SettingsTab} />
</Tab.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}Tab1：
import * as React from 'react';
import { Text, View } from 'react-native';
const HomeTab = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
export default HomeTab;Tab2：
import * as React from 'react';
import { Text, View } from 'react-native';
const SettingsTab = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
export default SettingsTab;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62804698
复制相关文章
相似问题
腾讯云开发者
