× TypeError: Невозможно прочитать свойство 'navigate' из неопределенного на React-Native expo response-navigation 5.xx - PullRequest
Новая
       76

× TypeError: Невозможно прочитать свойство 'navigate' из неопределенного на React-Native expo response-navigation 5.xx

0 голосов
/ 17 апреля 2020

Если кто-нибудь может мне помочь. Я уверен, что что-то упустил, но я не вижу этого. Я пытаюсь выполнить навигацию между 3 компонентами, и я создаю это с документацией со страницы реакции-навигации, я пробую много разных способов сделать это, но всегда получаю один и тот же ответ, так что если кто-то может увидеть ошибку, пожалуйста, скажите мне. 

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Header from './app/components/header/header'
import Main from './app/components/main/main';

import Data from './app/components/data/data';
import Grafic from './app/components/grafic/grafic';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import ButtonImage from './app/components/buttonImag/buttonImg'
import 'react-native-gesture-handler';


const Stack = createStackNavigator();

function MainScreen({ navigation }) {
    return (
        <ButtonImage onPress={() => navigation.navigate('Main')} heightV={40} widthV={40} itemImage={require('./app/resourse/home.png')} heightI={33} widthI={33} ></ButtonImage>
    );
};
function DataScreen({ navigation }) {
    return (
        <ButtonImage onPress={() => navigation.navigate('Data')} heightV={40} widthV={40} itemImage={require('./app/resourse/datalist.png')} heightI={33} widthI={33} ></ButtonImage>
    );
};
function GraficScreen({ navigation }) {
    return (
        <ButtonImage onPress={() => navigation.navigate('Grafic')} heightV={40} widthV={40} itemImage={require('./app/resourse/grafic.png')} heightI={33} widthI={33} ></ButtonImage>
    );
};

const Footer = ({ navigation }) => {

    return (
        <View style={styles.header}>
            <View style={styles.buttonPos}>
                <MainScreen />
                <DataScreen />
                <GraficScreen />
            </View>
        </View>
    )

};

function MyStack() {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Main" component={() => <Main />} />
            <Stack.Screen name="Data" component={() => <Data />} />
            <Stack.Screen name="Grafic" component={() => <Grafic />} />
        </Stack.Navigator>
    );
}

const App = () => {


    return (
        <View style={{ flex: 1 }}>
            <Header />

            <NavigationContainer>
                <MyStack />
            </NavigationContainer>
            <Footer />
        </View>
    );

}

const styles = StyleSheet.create({

    header: {

        backgroundColor: "#00BFFF",
        height: 55

    },

    buttonPos: {
        flex: 1,
        flexDirection: 'row',
        alignItems: "center",
        justifyContent: "space-between",
        padding: 7

    },

    conection: {
        flex: 1,
        flexDirection: 'row',
        alignItems: "center",
        justifyContent: "space-between",
        padding: 7
    }



});

export default App

1 Ответ

0 голосов
/ 20 апреля 2020

Что вам нужно сделать, это использовать Tab Navigator. В программе response-navigation v5 есть 3 способа сделать это:

createBottomTabNavigator

createMaterialBottomTabNavigator (очень легко настроить)

createMaterialTopTabNavigator (с tabBarPosition: 'bottom')

Также вы можете настроить вкладки, прочитав документацию.

Я сделал вам базовый c пример, используя эту последнюю опцию: 

import { SafeAreaView, View, Text, StyleSheet } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
import { createStackNavigator } from '@react-navigation/stack'

const Header = () => <View style={styles.header}><Text>Header title</Text></View>
const Main = () => <View style={styles.component}><Text>Main component</Text></View>
const Data = () => <View style={styles.component}><Text>Data component</Text></View>
const Grafic = () => <View style={styles.component}><Text>Grafic component</Text></View>

const footerConfig = {
    tabBarPosition: 'bottom',
}

const Tabs = createMaterialTopTabNavigator()

const MyFooter = () => (
    <Tabs.Navigator {...footerConfig}>
        <Tabs.Screen name="Main" component={Main} />
        <Tabs.Screen name="Data" component={Data} />
        <Tabs.Screen name="Grafic" component={Grafic} />
    </Tabs.Navigator>
)

const stackConfig = {
    headerMode: 'none',
}

const Stack = createStackNavigator()

const MyStack = () => (
    <Stack.Navigator {...stackConfig}>
        <Stack.Screen name="Tabs" component={MyFooter} />
    </Stack.Navigator>
)

export default () => (
    <SafeAreaView style={styles.main}>

        <Header />

        <NavigationContainer>
            <MyStack />
        </NavigationContainer>

    </SafeAreaView>
)

const styles = StyleSheet.create({
    main: {
        flex: 1,
    },
    header: {
        height: 64,
        width: '100%',
        justifyContent: 'center',
        alignItems: 'center',
    },
    component: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
})

РЕДАКТИРОВАТЬ :

Вы можете использовать крючок useNavigation внутри ваших компонентов. Если вы хотите использовать вашу текущую конфигурацию. https://reactnavigation.org/docs/use-navigation/ useNavigation

Кроме того, для отправки реквизитов навигации компонентам это: 

<Stack.Screen name="Main" component={() => <Main />} />

должно стать: 

<Stack.Screen name="Main" component={Main} />
// or 
<Stack.Screen name="Main" component={props => <Main {...props} />} />
...