redux + react-navigation 跳转出错?

问题大概发生在 Index(底部导航组件) navigat(导航)到其他页面( 包括它自己,this.props.navigation.navigate('Index'))时,都会出现以下警告。
但是如果是Login 页面 导航到其他页面事不会出现警告的

clipboard.png

//这是导航组件
import React from 'react';
import { Router, Route } from 'react-router';
import {
Component,
StyleSheet,
Text,
View,
FlatList,
Image,
} from 'react-native';

import {createStore, applyMiddleware,connect} from 'redux';
import { Provider } from 'react-redux';
import reducers from '../../other/reducers';
import thunk from 'redux-thunk';
const store = createStore(reducers,applyMiddleware(thunk));

import { StackNavigator } from 'react-navigation';
import Index from '../dist/Index';

import Login from '../dist/Login';
import FirstSceen from '../dist/FirstSceen';
import Setup from '../dist/Setup'
class MyNavigator extends React.Component {

constructor(props){
  super(props);
}
render() { 
  const ModalStack = StackNavigator({
      FirstSceen:{
        screen: FirstSceen
      },
      Login:{
        screen: Login
      },
      Index: {
            screen: Index
        },
        Setup: {
            screen: Setup
      },   
    } ,{ 
         navigationOptions: {
            headerTintColor: '#FFF',
            headerStyle: {
                backgroundColor: '#33a5ba', 
                height:50,
            },
        },
        initialRouteName:'Index'
    })
   return (
    <ModalStack />     
   )
}

}

export default function Root() {

return (
    <Provider store={store}>
        <MyNavigator />
    </Provider>
)

}

//Index
import React from 'react';
import {
StyleSheet,
Text,
View,
Image
} from 'react-native';
import { TabNavigator ,TabBarBottom, TabView, TabBarTop} from 'react-navigation';
import Conversation from '../dist/Conversation';
import Linkmans from '../dist/Linkmans';
import Action from '../dist/Action';
import Setup from '../dist/Setup';
import { Icon} from 'antd-mobile';
export default MainNavigator = TabNavigator({
Home: {

screen: Conversation,
 navigationOptions: {
        tabBarIcon: ({
            tintColor,
            focused
        }) => (
            <Icon type={'\uE65E'} size={26} color={tintColor} />
        ),
    }

},
Linkmans: {

screen: Linkmans,
navigationOptions: ({navigation}) => {
    return     {
        tabBarIcon: ({
            tintColor,
            focused
        }) => (
            <Icon type={"\uE66D"} size={26} color={tintColor} />
        ),
    }
}

},

Action: {
screen:Action,
navigationOptions:({navigation}) => { 
    return {
        tabBarIcon: ({
            tintColor,
            focused
        }) => (
            <Icon type={"\uE697"} size={26} color={tintColor} />
        ),
    }
}

},
Setup: {

screen:Setup,
navigationOptions:({navigation}) => { 
    return {
        tabBarIcon: ({
            tintColor,
            focused
        }) => (
            <Icon type={"\uE672"} size={26} color={tintColor} />
        ),
    }
}

},
},{
tabBarPosition: 'bottom',
swipeEnabled:true,

tabBarOptions: {
    activeTintColor: '#33a5ba', // 文字和图片选中颜色
    inactiveTintColor: '#555', // 文字和图片默认颜色
    showLabel:false,//标签显示
    showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
    lazy:true,
    backBehavior:'none',
    indicatorStyle: {
        height: 0
    }, // android 中TabBar下面会显示一条线,高度设为 0 后就不显示线了
    style: {
        backgroundColor: '#FFF', // TabBar 背景色
    },
},

})

//login 登录页
import React from 'react';
import { connect } from 'react-redux'
import {
StyleSheet,
Text,
View,
} from 'react-native';
class Index extends React.Component {

static navigationOptions = ({ navigation }) => ({  
   header:null,
});
constructor(props){
  super(props);
}
componentDidMount(){
    this.timer= setTimeout(()=>(
         this.props.navigation.navigate('Login')
     ),1000)
 }

render() { 
  
   return (
       <View >
          <Text>登录页</Text>
       </View>     
   )
}

}

function mapStateToProps(state) {

return state;

}
export default connect(mapStateToProps)(Index)

function mapStateToProps(state) {

return state;

}
export default connect(mapStateToProps)(Index)

阅读 2.1k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题