У меня есть три файла .js в моем собственном проекте реакции:
- App.js
- LoginPage.js
- RootNavigation.js
Мой экран запуска LoginPage.js Теперь мне нужно перейти на Rootnavigation.js .
RootNavigation.js имеет импорт MainTabnavigator.js
App.js:
import React from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { AppLoading, Asset, Font } from 'expo';
import { Ionicons } from '@expo/vector-icons';
import RootNavigation from './navigation/RootNavigation';
import LoginPage from './screens/LoginPage';
import { createSwitchNavigator, createStackNavigator } from 'react-navigation';
export 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" />}
<RootNavigation />
</View>
);
}
}
_loadResourcesAsync = async () => {
return Promise.all([
Asset.loadAsync([
require('./assets/images/robot-dev.png'),
require('./assets/images/robot-prod.png'),
]),
Font.loadAsync({
// This is the font that we are using for our tab bar
...Ionicons.font,
// We include SpaceMono because we use it in HomeScreen.js. Feel free
// to remove this if you are not using it in your app
'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
}),
]);
};
_handleLoadingError = error => {
// In this case, you might want to report the error to your error
// reporting service, for example Sentry
console.warn(error);
};
_handleFinishLoading = () => {
this.setState({ isLoadingComplete: true });
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
});
export default justsms = createStackNavigator(
{
First: { screen: LoginPage },
Second: { screen: App }
});
LoginPage.js:
import React from 'react';
import {Image, Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View, Button} from 'react-native';
export default class LoginPage extends React.Component {
static navigationOptions={
title:'Login Page'
};
NavigateActivityFunction = () =>
{
this.props.navigation.navigate('Second');
}
render(){
return(<View style={styles.container}>
<Button title='Tab Activity' onPress={this.NavigateActivityFunction}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
justifyContent:'center'
}
});
RootNavigation.js:
import React from 'react';
import { Notifications } from 'expo';
import { createSwitchNavigator } from 'react-navigation';
import MainTabNavigator from './MainTabNavigator';
import registerForPushNotificationsAsync from '../api/registerForPushNotificationsAsync';
const AppNavigator = createSwitchNavigator({
// You could add another route here for authentication.
// Read more at https://reactnavigation.org/docs/en/auth-flow.html
Main: MainTabNavigator,
});
export default class RootNavigation extends React.Component {
componentDidMount() {
this._notificationSubscription = this._registerForPushNotifications();
}
componentWillUnmount() {
this._notificationSubscription && this._notificationSubscription.remove();
}
render() {
return <AppNavigator />;
}
_registerForPushNotifications() {
// Send our push token over to our backend so we can receive notifications
// You can comment the following line out if you want to stop receiving
// a notification every time you open the app. Check out the source
// for this function in api/registerForPushNotificationsAsync.js
registerForPushNotificationsAsync();
// Watch for incoming notifications
this._notificationSubscription = Notifications.addListener(this._handleNotification);
}
_handleNotification = ({ origin, data }) => {
console.log(`Push notification ${origin} with data: ${JSON.stringify(data)}`);
};
}
MainTabNavigator.js:
import React from 'react';
import { Platform } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';
const HomeStack = createStackNavigator({
Home: HomeScreen,
});
HomeStack.navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === 'ios'
? `ios-information-circle${focused ? '' : '-outline'}`
: 'md-information-circle'
}
/>
),
};
const LinksStack = createStackNavigator({
Links: LinksScreen,
});
LinksStack.navigationOptions = {
tabBarLabel: 'Links',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? `ios-link${focused ? '' : '-outline'}` : 'md-link'}
/>
),
};
const SettingsStack = createStackNavigator({
Settings: SettingsScreen,
});
SettingsStack.navigationOptions = {
tabBarLabel: 'Settings',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? `ios-options${focused ? '' : '-outline'}` : 'md-options'}
/>
),
};
export default createBottomTabNavigator({
HomeStack,
LinksStack,
SettingsStack,
});
Здесь, когда я нажимаю на кнопку в LoginPage.js , она должна перейти на вкладку. Я пытался импортировать MainTabNavigator.js в App.js , но когда я нажимаю на кнопку, ничего не происходит. Буду рад, если кто-нибудь поможет мне в этом вопросе.