需求：

react native 封装一个通用的NavBar 导航栏其他包括自定义一StatusBar里面的属性，和页面标题、返回按钮，右面自定义操作

思路

要封装一个通用的导航栏，您可以使用React Native提供的Navigator组件。以下是一个简单的例子，展示了如何创建一个通用的导航栏，包括自定义的状态栏和返回按钮：

import React from 'react';  
import { Navigator, StatusBar, Text, TouchableOpacity } from 'react-native';  
  
// 创建一个通用的导航栏组件  
const NavBar = (props) => {  
  const { navigator, title, onPressBack, onRightButtonPress } = props;  
  
  return (  
    <Navigator.Navigator  
      initialRoute={{ name: 'Home' }}  
      renderScene={(route, navigator) => {  
        // 传递给子组件的props  
        const routeProps = {  
          navigator,  
          route,  
        };  
  
        // 根据route来决定显示哪个组件  
        switch (route.name) {  
          case 'Home':  
            return <Home {...routeProps} />;  
          case 'Profile':  
            return <Profile {...routeProps} />;  
          // 添加更多的路由组件...  
          default:  
            return <NotFound />;  
        }  
      }}  
    >  
      <Navigator.Navigator.Header  
        title={title}  
        onPressBack={onPressBack}  
        onPressRightButton={onRightButtonPress}  
        rightButtonIcon={require('./assets/icons/search.png')}  
        style={{ backgroundColor: '#f4511e' }}  
        navigator={navigator}  
      />  
    </Navigator.Navigator>  
  );  
};  
  
// 实现自定义的返回按钮和右边的按钮  
const Home = (props) => {  
  const { navigator, route } = props;  
  
  const onPressBack = () => {  
    if (navigator.getCurrentRoutes().length > 1) {  
      navigator.pop();  
    }  
  };  
  
  const onRightButtonPress = () => {  
    // 在这里添加自定义的右边按钮操作  
    console.log('Right button pressed!');  
  };  
  
  return (  
    <TouchableOpacity onPress={onPressBack}>  
      <Text style={{ color: 'white', fontSize: 16 }}>返回</Text>  
    </TouchableOpacity>  
  );  
};  
  
const Profile = (props) => {  
  // 在这里添加您的Profile组件实现  
};  
  
const NotFound = (props) => {  
  // 在这里添加您的NotFound组件实现  
};  
  
export default NavBar;

分析

在上面的代码中，我们创建了一个名为NavBar的通用导航栏组件。它接受一些props，包括navigator、title、onPressBack和onRightButtonPress。Navigator是React Native提供的用于管理导航的组件，StatusBar是用于设置状态栏样式的组件，Text和TouchableOpacity是用于显示返回按钮的组件。

在NavBar组件中，我们使用Navigator.Navigator来包裹我们的导航栏和场景。我们使用Navigator.Navigator.Header来创建导航栏的标题部分，包括返回按钮和右边的按钮。我们还实现了Home组件，用于显示返回按钮和右边的按钮的操作。

在您的应用程序中，您可以使用NavBar组件来包装您的页面，并传递相应的props。例如：

import React from 'react';  
import { AppRegistry, StyleSheet } from 'react-native';  
import NavBar from './NavBar';  
  
const App = () => {  
  return (  
    <NavBar  
      navigator={navigator}  
      title="我的应用"  
      onPressBack={() => console.log('Back button pressed!')}  
      onRightButtonPress={() => console.log('Right button pressed!')}  
    />  
  );  
};

方案2

要封装一个通用的导航栏，你可以使用React Native提供的Navigator组件。以下是一个简单的例子，展示了如何实现一个包含状态栏属性、页面标题和返回按钮的通用导航栏：

import React from 'react';  
import { Navigator, StatusBar, Text, TouchableOpacity } from 'react-native';  
  
const NavigationBar = ({ route, navigator }) => {  
  const { state, push, pop } = navigator;  
  const currentRoute = state.routeStack[state.index];  
  
  // 自定义状态栏属性  
  StatusBar.setBarStyle('light', true);  
  StatusBar.setHidden(false, true);  
  StatusBar.setNetworkActivityIndicatorVisible(false, true);  
  
  // 页面标题  
  const title = currentRoute.title ? currentRoute.title : '未知页面';  
  
  // 返回按钮  
  const backButton = (  
    <TouchableOpacity onPress={() => pop()} style={{ paddingHorizontal: 15 }}>  
      <Text style={{ color: '#fff', fontSize: 16 }}>返回</Text>  
    </TouchableOpacity>  
  );  
  
  // 右面自定义操作  
  const rightButton = (  
    <TouchableOpacity onPress={() => push('NextScreen')} style={{ paddingHorizontal: 15 }}>  
      <Text style={{ color: '#fff', fontSize: 16 }}>自定义操作</Text>  
    </TouchableOpacity>  
  );  
  
  return (  
    <Navigator.NavigationBar  
      route={route}  
      navigator={navigator}  
      style={{ backgroundColor: '#3b5998' }}  
    >  
      <Navigator.Row>  
        <Navigator.Row.Content>  
          {backButton}  
          <Navigator.Title>{title}</Navigator.Title>  
          {rightButton}  
        </Navigator.Row.Content>  
      </Navigator.Row>  
    </Navigator.NavigationBar>  
  );  
};  
  
export default NavigationBar;

在这个例子中，我们使用了Navigator组件来创建导航栏。在NavigationBar组件中，我们通过传入的route和navigator属性来访问当前路由和导航器。我们使用StatusBar组件来设置状态栏的属性，如样式、隐藏和网络活动指示器。

在页面标题方面，我们通过检查当前路由的title属性来获取页面标题，如果没有title属性，则将标题设置为“未知页面”。

在返回按钮方面，我们使用TouchableOpacity和Text组件来创建一个返回按钮，并通过pop()方法来处理返回操作。

在右面自定义操作方面，我们使用TouchableOpacity和Text组件来创建一个自定义按钮，并通过push()方法来处理跳转操作。

最后，我们将所有组件放入一个Navigator.NavigationBar组件中，并将其作为NavigationBar组件的根节点。