react-native结合react-navigation之TabNavigator

react-native开发需时肯定有tab的切换，或者页面的转调，当然用RN自身的Navigator 也可以但是也不是那么方便react-navigation
就能满足很多大部分需求，如下图的三种切换方式，下面就说下TabNavigator 和StackNavigator的应用，才踏的一个坑，还是太年轻呀，横刀一撸！！！！



主要的界面 用tab 切换即是TabNavigator， 切换如下图



一共四个页面当然配置就如下咯

// 两个参数 routeConfigs: NavigationRouteConfigMap,  config: TabNavigatorConfig = {}
// 一个route对应的页面和tab图标， 一个切换的样式整个tab栏的样式
//tab
export const AppNavigator = TabNavigator({
Hotshow: {screen: hotshow, navigationOptions: {
tabBarLabel: '热映',
tabBarIcon: ({ tintColor, focused }) => (
<Image resizeMode='contain'
source={require('../icon/icon_hot.png')}
style={[style.footImage, {tintColor: tintColor}]}
/>
)
}},
Usshow: {screen: usshow, navigationOptions: {
tabBarLabel: '北美',
tabBarIcon: ({ tintColor, focused }) => (
<Image style={[style.footImage, {tintColor: tintColor}]}
resizeMode='contain'
source={require('../icon/icon_us_normal.png')}
/>
)
}},
Soonshow: {screen: soonshow, navigationOptions: {
tabBarLabel: '近期',
tabBarIcon: ({ tintColor, focused }) => (
<Image style={[style.footImage, {tintColor: tintColor}]}
resizeMode='contain'
source={require('../icon/icon_soon_normal.png')}
/>
)}
},
Nearcinemas: {screen: nearcinemas, navigationOptions: {
tabBarLabel: '影院',
tabBarIcon: ({ tintColor, focused }) => (
<Image style={[style.footImage, {tintColor: tintColor}]}
resizeMode='contain'
source={require('../icon/icon_near_normal.png')}
/>
)},
}
}, {
tabBarPosition: 'bottom',
lazy: true, // 是否懒加载
initialRouteName: 'Hotshow',
tabBarOptions: {
showIcon: true,
pressOpacity: 0.8,
style: {
height: 45,
backgroundColor: '#ffffff',
zIndex: 0,
position: 'relative'
},
labelStyle: {
fontSize: 11,
paddingVertical: 0,
marginTop: -4
},
iconStyle: {
marginTop: -3
},
tabStyle: {
backgroundColor: 'rgb(230,69,51)',
},
}
});

TabNavigatorConfig更多具体的参数如下

/**
* Tab Navigator
*/
export interface TabNavigatorConfig {
tabBarComponent?: React.ReactElement<any>,
tabBarPosition?: 'top'|'bottom',
swipeEnabled?: boolean,
animationEnabled?: boolean,
lazy?: boolean,
tabBarOptions?: {
activeTintColor?: string,
activeBackgroundColor?: string,
inactiveTintColor?: string,
inactiveBackgroundColor?: string,
showLabel?: boolean,
style?: ViewStyle,
labelStyle?: TextStyle,

// Top
showIcon?: boolean,
upperCaseLabel?: boolean,
pressColor?: string,
pressOpacity?: number,
scrollEnabled?: boolean,
tabStyle?: ViewStyle,
indicatorStyle?: ViewStyle
}
initialRouteName?: string,
order?: string[],
paths?: any     // TODO: better def
backBehavior?: 'initialRoute'|'none'
}

如上都配置好了，就需要在屏幕上显示 ，下面代码作为展示 主要的还是创建了AppWithNavigationState 然后export 出他， 在root下调用

class AppWithNavigationState extends Component {

render() {
return(
<View style={{flex: 1}}>
{this.props.fetchbool ? <Loading/> :
<AppNavigator navigation={
addNavigationHelpers({dispatch: this.props.navigator,
state: this.props.nav})
}/>
}
</View>
)
}
}

function mapStateToProeps(state){
return {
fetchbool: state.fetchload.data,
nav: state.nav
}
};
function macthDispatchToProps(dispatch) {
return bindActionCreators({
navigator: navigator,
initHotshowAction: initHotshow,
fetchLoading: fetchLoading
}, dispatch);
}

let style = StyleSheet.create({
footImage: {
width: 25,
height: 25
},
});

export default connect(mapStateToProeps, macthDispatchToProps)(AppWithNavigationState);

结合了redux ， nav就是通过state 传递的，在redux目录下创建了一个navigators/reducer

import { NavigationActions } from 'react-navigation';
import { AppNavigator } from '../../navigators/AppNavigator';

const initialNavState = {
index: 0,
routes: [
{
key: 'Hotshow',
routeName:'Hotshow',
},
{
key: 'Usshow',
routeName:'Usshow',
},
{
key: 'Soonshow',
routeName:'Soonshow',
},
{
key: 'Nearcinemas',
routeName:'Nearcinemas',
},
],
};

export const nav = (state = initialNavState, action) => {
let nextState;
switch (action.type) {
case 'Usshow':
return AppNavigator.router.getStateForAction(
NavigationActions.navigate({ routeName: 'Usshow' }),
state
);
case 'Soonshow':
setate.index= 1
return AppNavigator.router.getStateForAction(
NavigationActions.navigate({ routeName: 'Soonshow' }),
state
);
case 'Nearcinemas':
return AppNavigator.router.getStateForAction(
NavigationActions.navigate({ routeName: 'Nearcinemas' }),
state
);
default:
//return AppNavigator.router.getStateForAction(action, state) || state;
// return AppNavigator.router.getStateForAction(
//   state
// );
return AppNavigator.router.getStateForAction(
NavigationActions.navigate({ routeName: 'Hotshow' }),
state
) || state ;
}
}

做到此处，是个tab的四个页面切换还是可以的，问题就在与当我切换到下一个页面时，就出现了状况，



在没有做进入下一个页面前，提前ajax请求，当进入了请求，当然能请求成功，但是请求成功后，刚显示的界面会还在显示等待时，尼玛返回上一个界面

这么说有点拗口，不解其意



额，，，， 清洗脱俗，惊鸿一瞥下就给直接返回A了， console.log(this.props.nav)  看看了 输出一次 nav.index = 0 

然后 1 然后 0 ··········就这么又回到原点了，同时在AppWithNavigationState，解决办法想了一个在navigators/reducer里把nav传递的index固定了

export const nav = (state = initialNavState, action) => {
let nextState;
switch (action.type) {
case 'Usshow':
setate.index= 1
return AppNavigator.router.getStateForAction(
NavigationActions.navigate({ routeName: 'Usshow' }),
state
);

有次当然可以解决，但是 tab按钮不能点击咯，这真是尴尬的一幕，

当然还有个蛋疼的直接用TabNavigator 在AppWithNavigationState中的render 会运行四次，即第一个界面加载时，

console.log 输出变知道 当然这样也有办法解决，react 的生命周期呀，最前面的两个 实例化 和存在期，就在存在期入手，

shouldComponentUpdate(nextProps, nextState) {
return **** ? false : true ;
}
componentWillUpdate(nextProps, nextState) {
return *** ? false : true;
}

render()就减小了开销

问题是 tab还是不能点击啊！！！！！！！！

谜底是这样  StackNavigator 需要这个！！！！

export const StackNavigator = StackNavigator(
{
Tab:{screen: AppNavigator},  // 就是整个tab切换的 AppNavigator
Product:{screen: DtlWebView}
},
{
stackConfig:{
header: null,
headerBackTitle:null,
headerTintColor:'#333333',
showIcon:true,
swipeEnabled:false,
animationEnabled:false,
initialRouteName: 'Hotshow'
},
mode:'card',
}
);

stackConfig 主要参数



 TabNavigator, StackNavigator配合应用就很好区分开了前者模块页面之间，后者Stack由字面理解就是通过栈的方式进行切换，最新的就压入到栈顶显示

在App 里之前的就改为StackNavigator

class App extends Component {

render() {
return (

<Provider store={ store }>
<StackNavigator />
</Provider>
);
}
}

到此就结束咯

不对之处，敬请更正··········