README.md
注意!!!!! 此组件仅适用于开发放牛娃外接小程序时使用,在此之外使用本组件开发造成的程序闪退现象不与修复
本组件功能为放牛娃小程序通用头部组件
使用方法
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 });