Я думаю, что вы немного напутали со всей структурой здесь. Было бы лучше всегда генерировать предлагаемый пример вкладки expo и опираться на него, как он настроен правильно. Я бы порекомендовал вам настроить ваши классы и приложение как таковое.
BuyerHome.js
import {StyleSheet, Text, View, Image, StatusBar, ImageBackground} from 'react-native';
import { createBottomTabNavigator, createAppContainer, StackNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import BuyerLoginForm from './component/BuyerLoginForm';
class BuyerHome extends React.Component {
render() {
const { navigation } = this.props;
return (
<View style={styles.BuyerContainer}>
<ImageBackground source={require('./logo/backround.png')} style={{width: '100%', height: '100%'}}>
<StatusBar backgroundColor='transparent' translucent barStyle="dark-content" />
<View style={styles.logoContainer}>
<Image style={styles.logo} source={require('./logo/applogo.png')} />
</View>
<View style={styles.title}><Text>Hey Buyer, please login via your number.</Text></View>
<View style={styles.formContainer}>
<BuyerLoginForm navigation={navigation} />
</View>
</ImageBackground>
</View>
);
}
}
export default BuyerHome;
VendorHome.js
import {StyleSheet, Text, View, Image, StatusBar, ImageBackground} from 'react-native';
import { createBottomTabNavigator, createAppContainer, StackNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import VendorLoginForm from './component/VendorLoginForm';
class VendorHome extends React.Component {
render() {
return (
<View style={styles.VendorContainer}>
<ImageBackground source={require('./logo/backround.png')} style={{width: '100%', height: '100%'}}>
<StatusBar backgroundColor='transparent' translucent barStyle="dark-content" />
<View style={styles.logoContainer}>
<Image style={styles.logo} source={require('./logo/applogo.png')} />
</View>
<View style={styles.title}><Text>Hey Vendor, please login via your number.</Text></View>
<View style={styles.formContainer}>
<VendorLoginForm />
</View>
</ImageBackground>
</View>
);
}
}
export default VendorHome;
BuyerLogin.js
import React from 'react';
import {StyleSheet, View, TextInput, TouchableOpacity, Text, KeyboardAvoidingView} from 'react-native';
import BuyerVerify from '../screens/BuyerVerify';
class BuyerLogin extends React.Component{
render(){
return(
<View style={styles.outer}>
<View style={styles.inner}>
<KeyboardAvoidingView style={styles.container}>
<TextInput style={styles.input}
placeholder="Enter your contact number"
placeholderTextColor="#939eaf"
keyboardType="phone-pad"
/>
<TouchableOpacity style={styles.buttonContainer} onPress={()=> this.props.navigation.navigate('Verify')}>
<Text style={styles.buttonText}>
Get OTP
</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
</View>
</View>
);
}
}
export default BuyerLogin;
BuyerVerify.js
import React from 'react';
import {StyleSheet, View, TextInput, TouchableOpacity, Text, KeyboardAvoidingView} from 'react-native';
export default class BuyerVerify extends React.Component{
render(){
return(
<View style={styles.outer}>
<View style={styles.inner}>
<KeyboardAvoidingView style={styles.container}>
<TextInput style={styles.input}
placeholder="Enter your contact number"
placeholderTextColor="#939eaf"
keyboardType="phone-pad"
/>
<TouchableOpacity style={styles.buttonContainer}>
<Text style={styles.buttonText}>
Get OTP
</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
</View>
</View>
);
}
}
export default BuyerVerify;
MainTabNavigator.js
import React from 'react';
import {StyleSheet, Text, View, Image, StatusBar, ImageBackground} from 'react-native';
import { createBottomTabNavigator, createAppContainer, StackNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import BuyerLoginForm from './component/BuyerLoginForm';
import VendorLoginForm from './component/VendorLoginForm';
const HomeStack = createStackNavigator({
Home: BuyerHome,
});
HomeStack.navigationOptions:{
tabBarLabel:'Buyer',
tabBarIcon:({tintColor})=>(
<Icon name="ios-basket" color={tintColor} size={25}/>
)
};
const ProfileStack = createStackNavigator({
Profile: VendorHome,
});
ProfileStack.navigationOptions:{
tabBarLabel:'Vendor',
tabBarIcon:({tintColor})=>(
<Icon name="md-cart" color={tintColor} size={25}/>
)
};
export default createBottomTabNavigator({
{
HomeStack,
ProfileStack
},
);
AppNavigator.js
import React from 'react';
import {createSwitchNavigator} from 'react-navigation';
import MainTabNavigator from './MainTabNavigator';
import BuyerLogin from './components/BuyerLogin';
import BuyerVerify from './components/BuyerVerify';
// every class you would to be able to navigate to that is not part of your tab put here
export default createSwitchNavigator({
Main: MainTabNavigator,
Login: BuyerLogin,
Verify: BuyerVerify
},
{
initialRouteName: 'Main'
},
);
App.js
import React from 'react';
import { Platform, StatusBar, StyleSheet, View} from 'react-native';
import { AppLoading, Asset, Font, Icon } from 'expo';
import AppNavigator from './AppNavigator';
export default class App extends React.Component {
state = {
isLoadingComplete: false,
};
render() {
if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
return (
<AppLoading
startAsync={this._loadResourcesAsync}
onError={this._handleLoadingError}
onFinish={this._handleFinishLoading}
/>
);
} else {
return (
<View style={styles.container}>
{Platform.OS === 'ios' && <StatusBar barStyle="default" />}
<AppNavigator />
</View>
);
}
}
_loadResourcesAsync = async () => {
return Promise.all([
Font.loadAsync({
// This is the font that we are using for our tab bar
...Icon.Ionicons.font,
}),
]);
};
_handleLoadingError = error => {
// In this case, you might want to report the error to your error
console.warn(error);
};
_handleFinishLoading = () => {
this.setState({ isLoadingComplete: true });
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
safeArea: {
flex: 1,
backgroundColor: 'red'
},
});
Я дал вам стандартный способ организации вашего приложения, и теперь ваша навигация должна работать, вкладка и классы приложений разделены. Вы должны убедиться, что вы помещаете все классы с правильным путем к нему и, возможно, убедитесь, что импорт корректен для каждого из них, я, вероятно, пропустил один или два. Надеюсь, что это поможет, и вы лучше понимаете структуру, которую вы должны иметь в приложении expo, и как должна работать навигация.