В этом навигаторе есть как навигационные, так и контейнерные реквизиты, поэтому неясно, должен ли он владеть собственным состоянием в собственном реактивном использовании. Tab Navigator

Question

У меня проблема при переключении формы с Splash.js на FirstPage.js. Появляется ошибка с сообщением «Этот навигатор имеет как навигационные, так и реквизиты контейнера, поэтому неясно, должно ли оно иметь свое собственное состояние».Ниже приведен сценарий каждой формы:

Splash.js:

import React, { Component } from 'react';
import { Text, View, StyleSheet, StatusBar, TouchableOpacity,Image,ImageBackground, Animated} from 'react-native';
import { StackActions, NavigationActions } from 'react-navigation';
import Logo from '../components/Logo';
import Wallpaper from '../components/Wallpaper';
import {Fonts} from '../utils/Fonts';

export default class Splash extends Component {
    constructor(props){
        super(props)

        this.state={
            logonyaFade     : new Animated.Value(0),
            tulisanFloat    : new Animated.Value(0),
        }
    }
    _start = () => {
        Animated.timing(this.state.logonyaFade, {
          toValue: 1,
          duration: 1000
        }).start();
    };
    componentWillMount(){
        console.disableYellowBox = true;
        setTimeout(async()=> {
            this.props.navigation.dispatch(
                StackActions.reset(
                    {
                        index:0,
                        actions: [
                            NavigationActions.navigate({routeName: 'firstpage'}),
                        ]
                    }));
        }, 2500)
    }
    render() {
        return(
            <Wallpaper>
                <View onLayout={this._start}>
                <Animated.View
                style={{
                    opacity: this.state.logonyaFade,
                    width:200,
                    height:200,
                }}
                >
                <Image style={styles.logoasih}
                    source={require('../images/logo.png')}/>
                </Animated.View>
                <Animated.View
                style={{
                    opacity: this.state.logonyaFade,
                }}
                >
                <Text style={styles.textmotto}>
                    "Bring Better Life To The World"
                </Text>
                </Animated.View>
                </View>
            </Wallpaper>
        )
    }
}

const styles = StyleSheet.create({
    container: {
      backgroundColor : '#00BFFF',
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center'
    },

    imgsplash:{
        alignContent: 'center',
        alignItems: 'center',
        justifyContent: 'center',

    },

    signupTextCont: {
        flexGrow: 1,
        alignItems: 'center',
        justifyContent: 'flex-end',
        paddingVertical: 16,
        flexDirection: 'row'
    },

    signupText:{
        color: 'rgba(255,255,255, 0.7)',
        fontSize: 16,
        paddingVertical: 30,
        marginVertical: 30
    },

    signupButton: {
        color: '#ffffff',
        fontSize: 16,
        fontWeight:'500'
    },

    logoasih:{
        width:200,
        height:200,
        marginTop:180,
        marginLeft:78

    },

    textmotto:{
        marginLeft:40,
        marginTop:200,
        fontSize: 20,
        color: '#015c6f',
        fontFamily: 'Lato',
        fontStyle: 'italic',
        lineHeight: 43.2,
    }
  });

FirstPage.js:

import React, {Component} from 'react';
import { Text, View, StyleSheet, SafeAreaView } from 'react-native';
import { createBottomTabNavigator, createAppContainer} from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import IconHome from '../components/IconHome';
import IconSetting from '../components/IconSetting';
import IconNews from '../components/IconNews';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';

class FirstPage extends React.Component{
  render(){
    return(
      <SafeAreaView style={{flex:1}}>
        <TabNavigator/>
      </SafeAreaView>
    )
  }
}
export class News extends Component {
  render(){
    return(
      <View style={styles.container}>
        <Text> News </Text>
      </View>
    );
  }
}

export class Home extends Component {
  render(){
    return(
      <View style={styles.container}>
        <Text> Home </Text>
      </View>
    );
  }
}

export class Settings extends Component {
  render(){
    return(
      <View style={styles.container}>
        <Text> Setting </Text>
      </View>
    );
  }
}

const TabNavigator = createMaterialBottomTabNavigator({
  News: { 
    screen: News,
    navigationOptions:{
      tabBarLabel:'News',
      tabBarIcon: ({tintColor}) => (
        <IconNews/>
      )
    }},
  Home: { 
    screen: Home,
    navigationOptions:{
    tabBarLabel:'Home',
    tabBarIcon: ({tintColor}) => (
      <IconHome/>
    )
  }},
  Settings: { 
    screen: Settings,
    navigationOptions:{
      tabBarLabel:'Settings',
      tabBarIcon: ({tintColor}) => (
        <IconSetting/>
      )
  }},
}, {
  initialRouteName: 'Home',
  order:['News',  'Home',  'Settings'],
  shifting: true,
  labeled: true,
  barStyle: { backgroundColor: '#00FFC6' },
  activeColor: 'black',
  inactiveColor: 'white'
});

export default createAppContainer(TabNavigator);

const styles = StyleSheet.create({
  container:{
    flex:1,
    alignItems: 'center',
    justifyContent: 'center'
  }
});

Я использую реагировать-native-router-flux,поэтому я использую Routes.js для навигации по форме Routes.js:

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

import Splash from './pages/Splash';
import Login from './pages/Login';
import Menu from './pages/Menu';
import Cases from './pages/Cases';
import Task from './pages/Task';
import Draft from './pages/Draft';
import Inbox from './pages/Inbox';
import Participated from './pages/Participated';
import Paused from './pages/Paused';
import Unassigned from './pages/Unassigned';
import Dynaform from './pages/Dynaform';
import FirstPage from './pages/FirstPage';
import Login2 from './pages/Login2';

export default class Routes extends Component{
    render(){
        return(
            <Router>
            <Scene key="root" hideNavBar={true} initial={true}>
                <Scene key ="splash" component={Splash} title="Splash"/>
                <Scene key ="login2" component={Login2} title="Login2"/>
                <Scene key ="firstpage" component={FirstPage} title="FirstPage"/>
                <Scene key ="login" component={Login} title="Login"/>
                <Scene key ="menuberita" component={Menu} title="Menu"/>
                <Scene 
                    component = {Cases}
                    hideNavBar ={true}
                    key = 'Cases'
                    title= 'Cases'
                />
                <Scene key ="task" component ={Task} title="Task"/>
                <Scene key ="draft" component ={Draft} title="Draft"/>
                <Scene key ="inbox" component ={Inbox} title="Inbox"/>
                <Scene key ="paused" component ={Paused} title="Paused"/>
                <Scene key ="participated" component ={Participated} title="Participated"/>
                <Scene key ="unassigned" component ={Unassigned} title="Unassigned"/>
                <Scene key ="dynaform" component ={Dynaform} title="Dynaform"/>
            </Scene>
            </Router>
        )
    }
}

Надеюсь, я смогу найти решение, здесь .. Спасибо ^ _ ^