Xn-react-native-general-head NPM

注意!!!!! 此组件仅适用于开发放牛娃外接小程序时使用,在此之外使用本组件开发造成的程序闪退现象不与修复

本组件功能为放牛娃小程序通用头部组件

使用方法

1.本组件依赖于react-navigation 2.13.0 版本同时需要react-native版本为0.47.2 , react版本为16.0.0-alpha.12 ,请先安装前面3项依赖后, 再手动添加 react-native-screens 版本为 1.0.0-alpha.15

2.在控制台进入工程根目录下运行命令行 yarn add "xn-react-nativce-general-head" 或者 npm i xn-react-nativce-general-head --save

3.在创建路由时的页面需要引用 (使用此组件,此项为必须项) import {Navigator} from 'xn-react-native-general-head';

创建固定头部导航栏 ,举个例子

const NavigatorNav = Navigator( { Home:{screen:Home}, Second:{screen:Second} }, { defaultBack:'', title:'我是一头小毛驴', //必填项,标明小程序名称 code:'visitorApp', //必填项,标明小程序code config:'DEV' //开发者选项, 此参数标明当前处于什么环境 (什么都不传为生产环境开发传入DEV 测试传入TEST)

    //此处可传入 react-navigation 可选的视觉选项 如: (mode headerMode headerTransitionPreset cardStyle transitionConfig onTransitionStart onTransitionEnd)
     
    
}

)

export default class Demo extends Component { render() { return (
{NavigatorNav} //引入上面创建的 NavigatorNav 最为导航开始必须放在一个flex:1的父视图内,否则会报错

);

} }

4.偶尔我们需要自定义页面头部底色和字体颜色在具体 .js文件中我们首先要将原有的下面方法注释掉,防止重复设置导航栏头部

static navigationOptions = ({navigation, screenProps}) => ({

});

然后可在 componentWillMount() componentDidMount() 方法中对导航栏头部进行设置,以下在componentDidMount 方法中做示范

componentDidMount(){ /---此处来自定义具体页面导航头部, 可自由设置标题文字背景颜色字体颜色和左侧返回按钮的显示如未设置则默认不显示返回按钮背景颜色和标题颜色为默认色(默认色由第三步中设置)---/ this.props.navigation.setParams({ title:'自定义Heade', //标题文字 isBack:false, //是否显示返回按钮 // backgroundColor:'red', //针对某界面更改头部背景色,但是头部按钮仍保持原色 // titleColor:'yellow', //针对某界面更改标题颜色 // backClick:()=>{} //可以传入一个方法取代左上角的返回方法,支持自定义(可选项,参数必须为一个方法) // muenList:()=>{} //可以传入一个方法,此方法为点击标题触发,支持自定义(可选项,参数必须为一个方法,此参数暂时仅针对任务中心开发,其他应用暂不能使用,如使用,后果自负) }); }

5.本组件继承'react-navigation'组件页面跳转方法没有改变

this.props.navigation.navigate('XXX'); // 页面跳转 this.props.navigation.goBack(); //返回上一页面

-----更新日志--------- 2019.12.23 1.创建导航时options参数添加closeModel，目前支持传入'FINISH'实现在android端点击右上角圆圈直接关闭RN应用而不是让RN栈退到后台例 const NavigatorNav = Navigator( { TabNav: {screen: TabNavigator}, }, { defaultBack:'', title:RString('app_name'), //必填项,标明小程序名称 code:'TicketRN', //必填项,标明小程序code config:'', //开发者选项, 此参数标明当前处于什么环境 (什么都不传为生产环境开发传入DEV 测试传入TEST) closeMode:'FINISH', // 当点击右上角小圆点时，是否彻底关闭RN应用 }

-----更新日志--------- 2020.05.28

1.增加单独导航页面 btnColorReversal 属性设置默认为 false ，设置为 true 时，会使当前页面导航栏按钮颜色变为相反的颜色，

默认导航栏按钮为白色时，设置 btnColorReversal 为 true 导航栏按钮将变为黑色，反之默认黑色时，设置为该属性后导航栏按钮将变为白色

例： this.props.navigation.setParams({ btnColorReversal:true });