反应原生 - 反应导航多个路线

问题描述：

我想知道是否有任何方法使TabNavigator内的StackNavigator与反应导航，现在我有TabNavigator那样在Router.js。我想在Add.js（添加屏幕）内的应用程序使ListNtem中的StackNavigator。 ListItem的每个元素都应该让用户访问其他屏幕。所以，如果我按第一个选项应该让我 “AddCalendarEvent” 等，就像你看到Add.js文件上addList不断反应原生 - 反应导航多个路线

Router.js

import React from 'react'; 
    import { 
     AppRegistry, 
     Text, 
     View, 
     Button 
    } from 'react-native'; 
    import {StackNavigator, TabNavigator} from 'react-navigation'; 

    import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; 
    import EntypoIcon from 'react-native-vector-icons/Entypo'; 

    import Login from './Login'; 
    import Menu from './Menu'; 
    import Desktop from './Desktop'; 
    import Notifications from './Notifications'; 
    import Today from './Today'; 
    import Add from './Add'; 

    const onClickNavigation = StackNavigator({ 
     Login: {screen: Login} 
    }); 

    const estimobileapplication = TabNavigator({ 
     Add: { 
      screen: Add, navigationOptions: { 
       title: 'Dodaj', 
       label: 'Dodaj', 
       tabBarIcon: ({tintColor}) => (<FontAwesomeIcon name="plus-circle" size={24} color="#666"/>) 
      } 
     }, 
     Desktop: { 
      screen: Desktop, navigationOptions: { 
       title: 'Pulpit', 
       label: 'Pulpit', 
       tabBarIcon: ({tintColor}) => (<FontAwesomeIcon name="th-large" size={24} color="#666"/>) 
      } 
     }, 
     Notifications: { 
      screen: Notifications, navigationOptions: { 
       title: 'Powiadomienia', 
       label: 'Powiadomienia', 
       tabBarIcon: ({tintColor}) => (<FontAwesomeIcon name="envelope" size={24} color="#666"/>) 
      } 
     }, 
     Today: { 
      screen: Today, navigationOptions: { 
       title: 'Na dziś', 
       label: 'Na dziś', 
       tabBarIcon: ({tintColor}) => (<FontAwesomeIcon name="check-square" size={24} color="#666"/>) 
      } 
     }, 
     Menu: { 
      screen: Menu, navigationOptions: { 
       title: 'Menu', 
       label: 'Menu', 
       tabBarIcon: ({tintColor}) => (<EntypoIcon name="menu" size={24} color="#666"/>), 
      } 
     } 
    }, { 
     tabBarOptions: { 
      activeTintColor: '#26b7ff', 
      inactiveTintColor: '#ffffff', 
      activeBackgroundColor: '#2E3035', 
      style: { 
       backgroundColor: '#14191f', 
      } 
     } 
    }); 


    AppRegistry.registerComponent('estimobileapplication',() => estimobileapplication);

添加。 js

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

import {List, ListItem} from 'react-native-elements'; 

import AddCalendarEvent from './add_offer_components/AddCalendarEvent'; 
import AddOfferFull from './add_offer_components/AddOfferFull'; 
import AddOfferQuick from './add_offer_components/AddOfferQuick'; 
import AddQuestion from './add_offer_components/AddQuestion'; 
import AddUser from './add_offer_components/AddUser'; 
import GetInvoice from './add_offer_components/GetInvoice'; 
import SellBuyTransaction from './add_offer_components/SellBuyTransaction'; 
import SendEmailToClient from './add_offer_components/SendEmailToClient'; 
import SendNotification from './add_offer_components/SendNotification'; 

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; 

class Add extends Component { 

    onShowMore() { 
     this.props.navigation.navigate('AddCalendarEvent'); 
    }; 

    render() { 

     const addList = [ 
      { 
       title: 'Nowa oferta lub zlecenie - szybkie dodanie', 
       component: AddOfferQuick 
      }, 
      { 
       title: 'Nowa oferta lub zlecenie - pełne dodanie', 
       component: AddOfferFull 
      }, 
      { 
       title: 'Nowe zapytanie', 
       component: AddQuestion 
      }, 
      { 
       title: 'Nowy termin w kalendarzu', 
       component: AddCalendarEvent 
      }, 
      { 
       title: 'Wyślij e-mail do klienta', 
       component: SendEmailToClient 
      }, 
      { 
       title: 'Transakcja kupna/najmu', 
       component: SellBuyTransaction 
      }, 
      { 
       title: 'Wystaw fakturę', 
       component: GetInvoice 
      }, 
      { 
       title: 'Wyślij powiadomienie', 
       component: SendNotification 
      }, 
      { 
       title: 'Dodaj użytkownika', 
       component: AddUser 
      } 
     ]; 

     return (
      <ScrollView style={{marginTop: 50, paddingLeft: 20}}> 
       <View style={{flexDirection: 'row', flexWrap: 'wrap'}}> 
        <FontAwesomeIcon name="plus-circle" size={30} color="#26b7ff"/> 
        <Text style={{textAlign: 'left', fontSize: 30, color: '#444444', marginLeft: 10}}> 
         Dodaj 
        </Text> 
       </View> 
       <List> 
        {addList.map((item, i) => (
         <ListItem 
          key={i} 
          title={item.title} 
          onPress={() => this.onShowMore()} 
         /> 

        ))} 
       </List> 
      </ScrollView> 
     ); 
    } 
} 


export default Add;

答

根据反应导航文档，您可以根据需要嵌套尽可能多的导航器。只需要定义一个StackNavigator，而不是在“屏幕”中为您的选项卡定义组件。这样，它将显示StakNavigator显示的第一个组件。

然后在每个项目中定义您需要的下一个屏幕的导航（）（我假设列表中的每个项目都是相同的屏幕）并将所需数据作为道具传递。

反应原生 - 反应导航多个路线

相关推荐