javascript - React native - 多条路线的 React Navigation

Question

我想知道是否有任何方法可以通过 react 导航在 TabNavigator 中创建 StackNavigator，现在我在 Router.js 中有类似的 TabNavigator。我希望 Add.js(添加屏幕)中的应用程序在 ListItem 中创建 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);

Add.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;

Answer 1

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

然后在每个项目中定义一个 navigate() 到您需要的下一个屏幕(我假设列表中的每个项目都是相同的屏幕)并将所需的数据作为 prop 传递。