Bedingtes Rendern des Bildschirms mit Reagierenavigation

Question

Kürzlich habe ich ein Navigationslayout mit react-navigation versucht. Ich habe 4 Tab, die in einer Schubladennavigation verschachtelt sind. Ich habe 3 Schubladenlabel. Ich möchte die Seite einer Registerkarte bedingt rendern, nehmen Sie Home Tab entsprechend der aktiven Schublade Label. Meine Codes sind unten:

Screens.js

import React from 'react'; 
import { View, Text } from 'react-native'; 

export const LaptopHome =() => { 
    return(
     <View style={{flex: 1, backgroundColor: '#e3e3e3'}}> 
     <Text> 
      This is laptop Home Page. 
     </Text> 
     </View> 
    ); 
} 

export const CameraHome =() => { 
    return(
    <View style={{flex: 1, backgroundColor: 'skyBlue'}} > 
     <Text>This is Camera Home Page</Text> 
    </View> 
) 
} 

export const MobileHome =() => { 
    return(
    <View style={{flex: 1}}> 
     <Text>This is a Mobile Home page</Text> 
    </View> 
); 
} 

export const Orders =() => { 
    return(
    <View style={{flex: 1}}> 
     <Text>Orders history details</Text> 
    </View> 
); 
} 

export const Profile =() => { 
    return(
    <View style={{flex: 1}}> 
     <Text>Profile details</Text> 
    </View> 
); 
} 

export const Notification =() => { 
    return(
    <View style={{flex: 1}}> 
     <Text>List of Notification</Text> 
    </View> 
); 
} 

Routes.js

import { StackNavigator, TabNavigator } from 'react-navigation'; 
import { FontAwesome } from '@expo/vector-icons'; 
import { LaptopHome, CameraHome, MobileHome, Orders, Profile, Notification } from './Screens'; 

const HomeStack = StackNavigator({ 
    Home: { 
    screen: LaptopHome //or CameraHome or MobileHome //Render according to active drawer label. 
    } 
}); 

const OrdersStack = StackNavigator({ 
    Order: { 
    screen: Orders, 
    } 
}); 

const ProfileStack = StackNavigator({ 
    Profile: { 
    screen: Profile, 
    } 
}); 

const NotificationStack = StackNavigator({ 
    Notification: { 
    screen: Notification, 
    } 
}); 

const HomeTab = TabNavigator({ 
    HomeTab: { 
    screen: HomeStack, 
    navigationOptions: { 
     tabBarLabel: 'Home', 
     tabBarIcon: ({ tintColor }) => <FontAwesome name="home" size={24} color={tintColor} />, 
    }, 
    }, 
    OrderTab: { 
    screen: OrdersStack, 
    navigationOptions: { 
     tabBarLabel: 'Orders', 
     tabBarIcon: ({ tintColor }) => <FontAwesome name="cart-arrow-down" size={24} color={tintColor} /> 
    }, 
    }, 
    ProfileTab: { 
    screen: ProfileStack, 
    navigationOptions: { 
     tabBarLabel: 'Profile', 
     tabBarIcon: ({ tintColor }) => <FontAwesome name="user" size={24} color={tintColor} /> 
    }, 
    }, 
    NotificationTab: { 
    screen: NotificationStack, 
    navigationOptions: { 
     tabBarLabel: 'Notification', 
     tabBarIcon: ({ tintColor }) => <FontAwesome name="bell" size={24} color={tintColor} /> 
    }, 
    } 
}, { 
initialRouteName: 'HomeTab', 
tabBarPosition: 'bottom', 
swipeEnabled: false, 
tabBarOptions: { 
    activeTintColor: '#4DD1A5', 
    inactiveTintColor: '#AAADAC', 
    upperCaseLabel: false, 
    showIcon: true, 
    style: { 
    backgroundColor: '#fff', 
    }, 
    labelStyle:{ 
    fontSize: 10, 
    margin: 0, 
    }, 
    indicatorStyle: { 
    opacity: 0, 
    }, 
}, 
}); 


export const AppNavigator = DrawerNavigator({ 
    Laptop: { 
    screen: HomeTab, 
    navigationOptions: { 
     drawerLabel: 'Laptop', 
    } 
    }, 
    Camera: { 
    screen: HomeTab, 
    navigationOptions: { 
     drawerLabel: 'Camera', 
    } 
    }, 
    Mobile: { 
    screen: HomeTab, 
    navigationOptions: { 
     drawerLabel: 'Mobile', 
     drawerIcon: ({ tintColor }) => (
     <MaterialCommunityIcons name="table-large" size={24} color={tintColor} /> 
    ), 
    } 
    } 
}, { 
    initialRouteName: 'Laptop', 
    contentOptions: { 
    activeTintColor: '#4DD1A5', 
    inactiveTintColor: '#AAADAC', 
    activeBackgroundColor: '#ffffff', 
    } 
}); 

So 363.210

App.js

'use strict'; 

import React, { Component } from 'react'; 
import {AppNavigator} from './Routes'; 

export default class App extends Component { 
    render() { 
    return (
     <AppNavigator /> 
    ); 
    } 
} 

AppRegistry.registerComponent('SimpleApp',() => App); 

möchte ich bedingt die HOME-Tab machen entsprechend dem aktiven Schublade Label. Ich habe versucht, durch den Zugriff auf den Zustand der Reagierenavigation, aber es war keine Hilfe. Hat jemand daran gearbeitet oder fehlt mir etwas.

Answer 1

Ich weiß, es ist eine Weile her, aber kam nur mit Ihrer Frage. Ich weiß, dass Sie react-Navigation verwenden, aber ich kann Ihnen eine Alternative vorschlagen, die reaction-native-router-flux ist. Es hat andere Funktionen sowie Navigation. Wenn Sie interessiert sind, können Sie weitere Details erreichen, indem Sie https://github.com/aksonov/react-native-router-flux besuchen. Aber Sie können einfach die folgenden Schritte befolgen, um auf Ihren Bildschirmen zu navigieren.

1- Fügen Sie Ihrem Projekt eine react-native-router-flux-Bibliothek hinzu, indem Sie es installieren.

2- Erstellen Sie eine Datei router.js, die Ihre Hauptbildschirm-Klassen hostet. ein einfaches Beispiel für die

import React from 'react'; 
import { Scene, Router } from 'react-native-router-flux'; 

const RouterComponent =() => { 
return (
    <Router> 
     {/*<Scene key="testScreen"> 
      <Scene key='testScene' component={RequestScreen} hideNavBar /> 
     </Scene>*/} 
     <Scene key="loginNav"> 
      <Scene key="loginScreen" component={LoginForm} hideNavBar panHandlers={null} /> 
      <Scene direction="vertical" key="signupScreen" component={SignUp} /> 
    </Router> 
);};export default RouterComponent; 

Wie Sie sehen, erstellen Sie eine Route, Art der Karte, die Ihre Bildschirme enthält zwischen ihnen zu navigieren.

3- Sobald Sie mit der Konfiguration des Routings fertig sind, können Sie zu jedem Bildschirm, von dem aus Sie navigieren und router-flux importieren möchten (Aktionen aus dieser Bibliothek exportieren), navigieren und den unten angezeigten Bildschirm aufrufen ;

Actions.signupScreen();

das ist alles, Sie sind jetzt gut zu gehen. Hoffentlich hilft dir das weiter. glücklicher Kodierkamerad!