React Navigation

React Navigation 分為stack navigator，tab navigation， drawer navigation。能夠提供原生的手勢和動畫效果。

stack navigator

createStackNavigator 返回一個(gè) React組件，如果是單獨(dú)的導(dǎo)航欄控制器，可以視為rootController。createStackNavigator是一個(gè)函數(shù)，接收一個(gè)路由對象和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>
    );
  }
}
// 導(dǎo)出模塊
export default createStackNavigator({
  Home: {
      screen: HomeScreen,
      navigationOptions: () => ({
        title: 'Home',
    }),
  },
});

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

router跳轉(zhuǎn)，需要聲明router對象,可以傳遞參數(shù),通過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參數(shù): {cusId}</Text>
      </View>
    );
  }
}

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

navigation標(biāo)題 樣式設(shè)置，如何不覆蓋，會共享navigationOptions,

class MineScreen extends React.Component {
  static navigationOptions = {
    title: 'MineScreen',
  };
  static navigationOptions = ({ navigation }) => {
    return {
      // 標(biāo)題
      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設(shè)置底部tabnav，tabBarIcon也是一個(gè)又返回值的函數(shù)，tabBarOptions設(shè)置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>
    );
  }
}
// 跳轉(zhuǎn)頁 details
class DetailsScreen extends React.Component {
  static navigationOptions = () => {
    return {
      // 標(biāo)題
      title: "Details",
    }
  }

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

    return (
      // ios 安全區(qū)域
      <SafeAreaView style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <StatusBar
          barStyle="dark-content"
          backgroundColor="blue"
        />
        <Text>Mine Screen</Text>
        <Text>傳遞ID參數(shù): {cusId}</Text>
      </SafeAreaView>
    );
  }
}
// 我的
class MineScreen extends React.Component {

  static navigationOptions = ({ navigation }) => {
    return {
      // 標(biāo)題
      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>
    );
  }
}

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

//導(dǎo)航欄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')
]