反应本机导航帖子

Question

我是初学者，尝试尝试一些示例。 我想用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;