I want to create an Order Page with two tabs place order tab, my orders tab. So I have created one Order.js file and another OrderContent.js file.
Order.js
/* @flow */ import React from 'react' import { View, StatusBar, } from 'react-native' import SplashScreen from 'react-native-splash-screen' import HomeHeader from '../Components/HomeHeader' import OrderContent from './OrderContent' export default class OrdersScreen extends React.Component { static navigationOptions = { drawer: () => ({ label: 'Orders', }), } static propTypes = { navigation: React.PropTypes.object.isRequired, } componentDidMount() { SplashScreen.hide() } render() { return ( <View style={{flex: 1, backgroundColor: '#fff'}}> <StatusBar barStyle="light-content" backgroundColor={'#202930'} /> <HomeHeader title="Order Page" navigation={this.props.navigation} /> <OrderContent navigation={this.props.navigation} /> </View> ) } } Ordercontent.js
const CustomTabView = ({router, navigation}) => { const { routes, index } = navigation.state const ActiveScreen = router.getComponentForState(navigation.state) return ( <View style={styles.container}> <CustomTabBar navigation={navigation} /> <ActiveScreen navigation={addNavigationHelpers({ ...navigation, state: routes[index], })}/> </View> ) } CustomTabView.propTypes = { router: React.PropTypes.object.isRequired, navigation: React.PropTypes.object.isRequired, // team: React.PropTypes.func.isRequired, } const CustomTabRouter = TabRouter({ PlaceOrder: { screen: PlaceOrderScreen, path: '/place-order', }, MyOrders: { screen: MyOrderScreen, path: '/my-orders', }, }, { // Change this to start on a different tab initialRouteName: 'PlaceOrder', } ) const OrderContent = createNavigationContainer(createNavigator(CustomTabRouter)(CustomTabView)) export default OrderContent When I tried to run the app, it shows like
there is no route defined for the index undefined. Check that you passed in a navigation state with a valid tab index.
I know that the problem exists in <OrderContent navigation={this.props.navigation} /> part itself but don't know how to overcome.
0 comments:
Post a Comment