React Navigation 使用

React Navigation

React Navigation 分为stack navigator，tab navigation， drawer navigation。能够提供原生的手势和动画效果。

stack navigator

createStackNavigator 返回一个 React组件，如果是单独的导航栏控制器，可以视为rootController。createStackNavigator是一个函数，接收一个路由对象和optional config 对象，router对象key->value;

// app.js 文件
import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}
// 导出模块
export default createStackNavigator({
  Home: {
      screen: HomeScreen,
      navigationOptions: () => ({
        title: 'Home',
    }),
  },
});

// index.js 中注册组件
AppRegistry.registerComponent('ReactApp', () => App);

router跳转，需要声明router对象,可以传递参数,通过getParam接收

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title = "jump to Mine"
          onPress={() => this.props.navigation.navigate('Mine',{
                id:100
           })}
        />
      </View>
    );
  }
}

class MineScreen extends React.Component {
  render() {
    let {navigation} = this.props;
    let cusId = navigation.getParam('id','cusId')
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Mine Screen</Text>
        <Text>传递ID参数: {cusId}</Text>
      </View>
    );
  }
}

export default createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
  Mine: {
    screen: MineScreen,
  }
},{
  initialRouteName: 'Home'
});

navigation标题 样式设置，如何不覆盖，会共享navigationOptions,

class MineScreen extends React.Component {
  static navigationOptions = {
    title: 'MineScreen',
  };
  static navigationOptions = ({ navigation }) => {
    return {
      // 标题
      title: navigation.getParam('otherParam'),
      headerTintColor: 'blue',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
      // left barItem
      headerRight: (
        <Button
          onPress={() => alert('This is a button!')}
          title="Info"
          color= "blue"
        />
      ),
    };
  };
   
  // 
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Mine Screen</Text>
      </View>
    );
  }
}

Tab navigation

生成简单的tabbar,通过navigationOptions设置底部tabnav，tabBarIcon也是一个又返回值的函数，tabBarOptions设置item属性

import React from 'react';
import { View, Text, Button, Image, Icon, StyleSheet, SafeAreaView,StatusBar } from 'react-native';
import { createStackNavigator,NavigationComponent,createBottomTabNavigator } from 'react-navigation';


// 首页
class HomeScreen extends React.Component {
  static navigationOptions =  {
    title: "Home"
  }
  render() {
    return (
      <SafeAreaView style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title = "jump to Mine"
          onPress={() => this.props.navigation.push('Details',{
            id:1
          })}
        />
      </SafeAreaView>
    );
  }
}
// 跳转页 details
class DetailsScreen extends React.Component {
  static navigationOptions = () => {
    return {
      // 标题
      title: "Details",
    }
  }

  render() {
      
    let { navigation } = this.props;
     // 传递值
    let cusId = navigation.getParam('id', 'cusId')
    

    return (
      // ios 安全区域
      <SafeAreaView style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <StatusBar
          barStyle="dark-content"
          backgroundColor="blue"
        />
        <Text>Mine Screen</Text>
        <Text>传递ID参数: {cusId}</Text>
      </SafeAreaView>
    );
  }
}
// 我的
class MineScreen extends React.Component {

  static navigationOptions = ({ navigation }) => {
    return {
      // 标题
      title: 'Mine',
      headerTintColor: 'blue',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
      // left barItem
      headerRight: (
        <Button
          onPress={() => alert('This is a button!')}  title="Info" color= "blue"
        />
      ),
    };
  };

  // 组件挂载完成后，改动navigation，
  // componentDidMount() {
  //   this.props.navigation.setParams({ increaseCount: this._increaseCount });
  // }

  render() {
    let {navigation} = this.props;
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Mine Screen</Text>
      </View>
    );
  }
}

// 导航栏1
const nav1 =  createStackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: () => ({
      title: 'Home',
      tabBarComponent:null
    },{
      mode: 'card',
      navigationOptions: {
        gesturesEnabled: true,
      },
    }),
  },
  Details: {
    screen: DetailsScreen,
  }
},{
  initialRouteName: 'Home'
});

//导航栏2
const nav2 = createStackNavigator({

  Mine: {
      screen: MineScreen,
    }
  }, {
    initialRouteName: 'Mine'
  });


export default createBottomTabNavigator(
  {
    Home:nav1,
    Mine: nav2
  },
  {
    // tabbar 配置
    navigationOptions: ({ navigation }) => ({
      tabBarLabel: navigation.state.routeName,
      tabBarVisible: navigation.state.index>0 ? false:true, // 显示tabbar
      tabBarIcon: ({ tintColor,focused }) => {
        
        let routeName = navigation.state.routeName
        let soucrePath
        if (routeName === 'Home') {

          soucrePath = focused ? imageArr[1] : imageArr[0]
        } else if (routeName === 'Mine') {

          soucrePath = focused ? imageArr[3] : imageArr[2]
        }
        
        return <Image style={[{ width: 24, height: 24 }]} source={soucrePath} />
      },
    }),
    tabBarOptions: {
      showIcon: true
    },
  }
);

const imageArr = [
  require('./src/res/images/home_n.png'),
  require('./src/res/images/home_s.png'),
  require('./src/res/images/mine_n.png'),
  require('./src/res/images/mine_s.png')
]