我是初学者,尝试尝试一些示例。 我想用Profile调用并在导航中使用moveToUpload方法,因此进入“上传屏幕”。但是我尝试了很多,却不知道如何管理。我想到了类似this.props.navigation.navigate('Upload')的东西,但是它不起作用。
import React,{ useCallback } from 'react'
import { View,Text } from 'react-native'
import { createNavigator,TabRouter,createAppContainer } from 'react-navigation'
import BottomNavigation,{
FullTab
} from 'react-native-material-bottom-navigation'
import Icon from '@expo/vector-icons/MaterialCommunityIcons'
import Feed from './Feed/Feed';
import Upload from './Upload/Upload';
import Profile from './Profile/Profile';
// Screens. Normally you would put these in separate files.
const FeedVariable = () => (
<Feed></Feed>
)
const UploadVariable = () => (
<Upload></Upload>
)
const ProfileVariable = () => (
<Profile moveToUpload={() => }></Profile>
)
function AppTabView(props) {
const tabs = [
{ key: 'Feed',label: 'Feed',barColor: '#00695C',icon: 'movie' },{ key: 'Upload',label: 'Upload',barColor: '#6A1B9A',icon: 'music-note' },{ key: 'Profile',label: 'Profile',barColor: '#1565C0',icon: 'book' }
]
const { navigation,descriptors } = props
const { routes,index } = navigation.state
const activeScreenName = routes[index].key
const descriptor = descriptors[activeScreenName]
const activeScreen = descriptor.getcomponent()
const handletabPress = useCallback(
newTab => navigation.navigate(newTab.key),[navigation]
)
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<activeScreen navigation={descriptor.navigation} />
</View>
<BottomNavigation
tabs={tabs}
activetab={activeScreenName}
onTabPress={handletabPress}
renderTab={({ tab,isactive }) => (
<FullTab
isactive={isactive}
key={tab.key}
label={tab.label}
renderIcon={() => <Icon name={tab.icon} size={24} color="white" />}
/>
)}
/>
</View>
)
}
const AppTabRouter = TabRouter({
Feed: { screen: FeedVariable },Upload: { screen: UploadVariable },Profile: { screen: ProfileVariable }
})
const Navigator = createNavigator(AppTabView,AppTabRouter,{});
const ScreenLoggedIn = createAppContainer(Navigator);
export default ScreenLoggedIn;