Fatal编程技术网
  • javascript/
  • Javascript React native-对多个路由进行React导航

Javascript React native-对多个路由进行React导航

javascript android ios react-native

Javascript React native-对多个路由进行React导航,javascript,android,ios,react-native,Javascript,Android,Ios,React Native,我想知道是否有任何方法可以使TabNavigator中的StackNavigator与react navigation一起使用，现在我在Router.js中有了类似的TabNavigator。我想让app insideAdd.js（添加屏幕）在ListItem中创建StackNavigator。ListItem的每个元素都应该让用户进入其他屏幕。所以，如果我按下第一个选项，它会让我进入“AddCalendarEvent”等，就像你在addList常量上的Add.js文件中看到的那样 Router

我想知道是否有任何方法可以使TabNavigator中的StackNavigator与react navigation一起使用，现在我在Router.js中有了类似的TabNavigator。我想让app insideAdd.js（添加屏幕）在ListItem中创建StackNavigator。ListItem的每个元素都应该让用户进入其他屏幕。所以，如果我按下第一个选项，它会让我进入“AddCalendarEvent”等，就像你在addList常量上的Add.js文件中看到的那样

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);

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;

从“React”导入React；
进口{
评估学，
文本，
看法
按钮
}从“反应本机”；
从“react navigation”导入{StackNavigator，TabNavigator}；
从“react native vector icons/FontAwesome”导入FontAwesomeIcon；
从“react native vector icons/Entypo”导入EntypoIcon；
从“./Login”导入登录名；
从“./菜单”导入菜单；
从“./Desktop”导入桌面；
从“./Notifications”导入通知；
从“./今天”导入今天；
从“/添加”导入添加；
const onClickNavigation=StackNavigator({
登录：{屏幕：登录}
});
const estimobileapplication=TabNavigator({
加：{
屏幕：添加，导航选项：{
标题：“Dodaj”，
标签：“Dodaj”，
tabBarIcon:（{tintColor}）=>（）
}
},
桌面：{
屏幕：桌面，导航选项：{
标题:"讲坛",，
标签：“讲坛”，
tabBarIcon:（{tintColor}）=>（）
}
},
通知：{
屏幕：通知、导航选项：{
标题：“Powiadomienia”，
标签：“Powiadomienia”，
tabBarIcon:（{tintColor}）=>（）
}
},
今天：{
屏幕：今天，导航选项：{
标题:"那次",，
标签：“Na dziś”，
tabBarIcon:（{tintColor}）=>（）
}
},
菜单：{
屏幕：菜单、导航选项：{
标题：“菜单”，
标签：“菜单”，
tabBarIcon:（{tintColor}）=>（），
}
}
}, {
选项卡选项：{
activeTintColor:“#26b7ff”，
InactiveIntColor:“#ffffff”，
activeBackgroundColor:“#2E3035”，
风格：{
背景颜色：“#14191f”，
}
}
});
AppRegistry.registerComponent（'estimobileapplication'，（）=>estimobileapplication）；
Add.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);

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;

import React，{Component}来自'React'；
进口{
滚动视图，
文本，
看法
导航器
}从“反应本机”；
从“react native elements”导入{List，ListItem}；
从“./add_offer_components/AddCalendarEvent”导入AddCalendarEvent；
从“./add_offer_components/AddOfferFull”导入AddOfferFull；
从“.”导入AddOfferQuick/add_offer_components/AddOfferQuick”；
从“./add_offer_components/AddQuestion”导入AddQuestion；
从“./add_offer_components/AddUser”导入AddUser；
从“.”导入GetInvoice/add_offer_components/GetInvoice'；
从“.”导入SellBuyTransaction/add_offer_components/SellBuyTransaction'；
从“.”导入SendEmailToClient/add_offer_components/SendEmailToClient'；
从“./add_offer_components/SendNotification”导入SendNotification；
从“react native vector icons/FontAwesome”导入FontAwesomeIcon；
类添加扩展组件{
onShowMore（）{
this.props.navigation.navigate（'AddCalendarEvent'）；
};
render（）{
常量addList=[
{
标题：“兹勒克涅-斯兹布基·多达尼之旅”，
组件：AddOfferQuick
},
{
标题：“兹勒塞尼-佩涅·多达尼俱乐部的诺瓦”，
组件：AddOfferFull
},
{
标题：“Nowe zapytanie”，
组成部分：添加问题
},
{
标题：“卡伦达尔祖的新终点站”，
组件：AddCalendarEvent
},
{
标题：“Wyślij e-mail do klienta”，
组件：SendEmailToClient
},
{
标题：“Transakja kupna/najmu”，
组成部分：SellBuyTransaction
},
{
标题：“Wystaw fakturę”，
组件：GetInvoice
},
{
标题：“Wyślij powiadomienie”，
组件：发送通知
},
{
标题：“Dodaj użytkownika”，
组件：AddUser
}
];
返回(
多达伊
{addList.map（（项，i）=>(
this.onShowMore（）}
/>
))}
);
}
}
导出默认添加；
根据react导航文档，您可以根据需要嵌套任意多个导航器。只需定义StackNavigator，而不是在“屏幕”中为选项卡定义组件。这样，它将显示StatanAvigator显示的第一个组件

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