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