ReactNavigation入门与自定义头部

1、安装

    yarn add react-navigation

2、创建主页与跳转页面

主页

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


render() {
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text>Home Screen</Text>
            <TouchableOpacity onPress={() => this.props.navigation.navigate('MineHome', {
                itemId: 'Reload',
                name: 'Back',
                hideBack: true
            })}>
                <Text> title="Go to Details"</Text>

            </TouchableOpacity>
        </View>
    );
}
}
 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 (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text style={{width:200,height:100,borderColor:'#f00',borderRadius:10,borderWidth:2}}>MineHome Details Screen</Text>
  
                <TouchableOpacity onPress={() => this.props.navigation.navigate('MineHome')}>
                    <Text>{this.state.itemId}</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
                    <Text>{this.state.name}</Text>
                </TouchableOpacity>
  
            </View>
        );
    }
  }
  
  export default  MineHome
  

3、启动页

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

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 ? <Text style={{marginLeft: 10}}/>
            :
            <TouchableOpacixty style={{paddingLeft: 10, paddingRight: 30}}
                               onPress={() => {
                                   navigation.pop()
                               }}>
                <Image style={{width: 32, height: 32}}
                       source={require('../assets/icon_back.png')}/>
            </TouchableOpacixty>
    ),
    headerRight: (navigation.state.params.rightTitle !== null ?
        (<TouchableOpacity
            onPress={() => callOnceInInterval(() => navigation.state.params.navigatePress!== undefined?
                navigation.state.params.navigatePress():null)
            }>
            <Text style={CommonStyle.headerRight}>{navigation.state.params.rightTitle}</Text>
        </TouchableOpacity>) :
        ((<Text style={{marginRight: 10}}/>))),
})

render() {
    return null
}
}

export default BaseComponent

设置params（修改headerTitle）

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

createHeaderParentTitle = () => (
  <View style={{ flexDirection: "row", flex: 1, justifyContent: "center" }}>
   <Text style={[commonStyles.headerTitleStyle, { alignSelf: "center" }]}>体适能</Text>
  </View>
)