react-native 配合 react-navigation 入门demo

前置条件：

安装好react-native，通过 react-native init xxxproject
再react-native run-android运行
安装好react-navigation相关可以看官网的文档。

文件目录：

其中几个Page页面都只是页面对应字改了一下而已。

AppNavigator.js

import { createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';

import WelcomePage from '../pages/WelcomePage'
import DetailPage from '../pages/DetailPage'
import HomePage from '../pages/HomePage'

const MainNavigator = createStackNavigator({
  HomePage: {
    screen:HomePage,
    navigationOptions: {
      header: null
    }
  },
  DetailPage: {
    screen:DetailPage
  }
});
const InitNavigator = createStackNavigator({
   WelcomePage: {
    screen:WelcomePage,
    navigationOptions: {
      header: null
    }
  }
});

export default createAppContainer(createSwitchNavigator(
  {
    Init: InitNavigator,
    Main: MainNavigator,
  },
  {
    initialRouteName: 'Init',
  }
));

SwitchNavigator 的用途是一次只显示一个页面。默认情况下，它不处理返回操作。我们可以通过它做一个一开始初始化欢迎页面，以及后续展示页面。

header:可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为null

welcomePage.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import NaivgationUtil from '../navigator/NavigationUtil';

type Props = {};
export default class WelcomePage extends Component <Props> {
    componentDidMount() {
        this.timer = setTimeout(() => {
            NaivgationUtil.resetToHomePage({
                navigation: this.props.navigation
            })
        }, 2000);
    }
    componentWillUnmount() {
        this.timer&&clearTimeout(this.timer);
    }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>WelcomePage</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

通过挂载定时器来定时跳转，同时记得销毁定时器。

NaivgationUtil.js

作为一个util文件需要的公共方法的提取

export default class NaivgationUtil {
    static goPage(params, page) {
        const navigation  = NaivgationUtil.navigation;
        if(!navigation) {
            console.log('navigation can not be null')
            return;
        }
        navigation.navigate(
            page,
            {
                ...params
            }
        )
    }
    static goBack(navigation) {
        navigation.goback();
    }
    static resetToHomePage(params) {
        const { navigation } = params;
        navigation.navigate('Main');
    }
};

同时需要将index.js入口文件进行修改一下

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import AppNavigator from './js/navigator/AppNavigator'
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => AppNavigator);

接着需要一个顶部的tab

tab.js

tab中引入了需要的页面.

icons用了react-native-vector-icons 里面的三个类。安装react-native-vectors-icons 除了npm 以外还需要react-native link react-native-vector-icons 来进行自动关联。

方法较为类似，有screen对应页面，以及options对应的其他选项的配置，包含标题，icon。

import React from 'react';
import {
    createBottomTabNavigator,
    createAppContainer
} from 'react-navigation';

import FavoritePage from './FavoritePage';
import MyPage from './MyPage';
import PopularPage from './PopularPage';
import TrendingPage from './TrendingPage';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Ionicons from 'react-native-vector-icons/Ionicons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';

const TabNavigator = createBottomTabNavigator({
    FavoritePage: {
        screen: FavoritePage,
        navigationOptions: {
            tabBarLabel: "收藏",
            tabBarIcon: ({tintColor, focused}) => (
                <MaterialIcons
                    name={'favorite'}
                    size={26}
                    style={{color: tintColor}}
                />
            )
        }
    },
    MyPage: {
        screen: MyPage,
        navigationOptions: {
            tabBarLabel: "我的",
            tabBarIcon: ({tintColor, focused}) => (
                <FontAwesome
                    name={'user'}
                    size={26}
                    style={{color: tintColor}}
                />
            )
        }        
    },
    PopularPage: {
        screen: PopularPage,
        navigationOptions: {
            tabBarLabel: "最热",
            tabBarIcon: ({tintColor, focused}) => (
                <MaterialIcons
                    name={'whatshot'}
                    size={26}
                    style={{color: tintColor}}
                />
            )
        }
    },
    TrendingPage: {
        screen: TrendingPage,
        navigationOptions: {
            tabBarLabel: "趋势",
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={'md-trending-up'}
                    size={26}
                    style={{color: tintColor}}
                />
            )
        }   
    },
});

export default createAppContainer(TabNavigator);

top.js

同样和底部较为类似。


import {
    createMaterialTopTabNavigator, createAppContainer
} from 'react-navigation';

import Tab1 from './Tab1';
import Tab2 from './Tab2';
const TabNavigator = createMaterialTopTabNavigator({
    PopularTab1: {
        screen: Tab1,
        navigationOptions: {
            tabBarLabel: "tab1"
        }
    },
    PopularTab2: {
        screen: Tab2,
        navigationOptions: {
            tabBarLabel: "tab2"
        }
    }
});

export default createAppContainer(TabNavigator);

最后还有一个详情页面的跳转：

tab1.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

type Props = {};
import NavigatorUtil from '../navigator/NavigationUtil'
export default class Tab1 extends Component <Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>PopularPage1</Text>
        <Text onPress={() => {
            NavigatorUtil.goPage({
                navigation: this.props.navigation
            }, "DetailPage")
        }}>跳转到详情页</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

结果显示：

demo下载：

https://download.csdn.net/download/qq_37021554/11094521

react-native 配合 react-navigation 入门demo

猜你喜欢