ReactNavigation入门与自定义头部

1、安装

    yarn add react-navigation

2、创建主页与跳转页面

主页

class HomeScreen extends BaseComponent {
//BaseComponent：自定义基类
static  navigationOptions = ({navigation}) => {
    return {
        headerTitle: 'Home',
        headerTitleStyle: CommonStyle.headerTitleStyle,
    }
}


render() {
    return (
        
            Home Screen
             this.props.navigation.navigate('MineHome', {
                itemId: 'Reload',
                name: 'Back',
                hideBack: true
            })}>
                 title="Go to Details"

            
        
    );
}
}
 export default HomeScreen

• 跳转页面

  import React, { Component } from 'react';
  import {Text, TouchableOpacity, View} from 'react-native';
  import BaseComponent from "../../utils/BaseComponent";
  
  class MineHome extends BaseComponent{
      static navigationOptions=({
         header:null//隐藏头部
      })
      state={
        itemId:'',
        name:''
      }
  
    componentWillMount() {
        this.setState({
            itemId:this.props.navigation.state.params.itemId,
            name:this.props.navigation.state.params.name
        })
    }
  
    render() {
        return (
            
                MineHome Details Screen
  
                 this.props.navigation.navigate('MineHome')}>
                    {this.state.itemId}
                
                 this.props.navigation.goBack()}>
                    {this.state.name}
                
  
            
        );
    }
  }
  
  export default  MineHome
  

3、启动页

  const RootStack = StackNavigator(
    {
        HomeScreen: {
            screen: HomeScreen,
        },
        MineHome: {
            screen: MineHome,
            navigationOptions: {
            headerTitle: 'Detail'
        }
    },
  },
  {
        initialRouteName: 'HomeScreen',
  }
  );
export default class App extends Component {
    render() {
       return (
            
        );
    }
}

3、自定义头部控件

import React, {Component} from 'react'
import {CommonStyle} from "./CommonStyle";
import {Image, Text, TouchableOpacity} from "react-native";
import {callOnceInInterval} from "./EventUtils";

class BaseComponent extends React.Component {

static navigationOptions=({navigation})=>({
    headerStyle:({backgroundColor:'white'}),
    headerTitle:navigation.state.params.title,
    headerTitleStyle:CommonStyle.headerTitleStyle,
    headerLeft: (navigation.state.params.hideBack ? 
            :
             {
                                   navigation.pop()
                               }}>
                
            
    ),
    headerRight: (navigation.state.params.rightTitle !== null ?
        ( callOnceInInterval(() => navigation.state.params.navigatePress!== undefined?
                navigation.state.params.navigatePress():null)
            }>
            {navigation.state.params.rightTitle}
        ) :
        (())),
})

render() {
    return null
}
}

export default BaseComponent

设置params（修改headerTitle）

this.props.navigation.setParams({
  createTitle: this.createHeaderParentTitle
})

createHeaderParentTitle = () => (
  
   体适能
  
)