ReactNative navbar
npm install react-native-ccs-navbarnpm i --save react-native-ccs-navbar
import NavBar from 'react-native-ccs-navbar';
``
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import NavBar from 'react-native-ccs-navbar';
export default class TestNavBar extends Component {
render() {
return (
leftTitle={'leftTitle'}
rightTitle={'rightTitle'}
rightFun={()=>{console.log('123')}}
navBgColor={'red'}
/>
);
}
}
`
| props | PropTypes | use | description|
|:---:|:---:|:---:|:---:|
|isTransparent|React.PropTypes.bool|false or true|设置navbar背景色为透明,默认false背景色为白色|'default'
|statusBarStyle| React.PropTypes.string| or 'light-content'|状态栏样式'default'/'light-content'|red
|navBgColor| React.PropTypes.string||nav整体的背景颜色|rgba(95,95,95,1)
|statusBgColor| React.PropTypes.string||主要是用于设置安卓的状态栏颜色|"your title"
|title|React.PropTypes.string||文本标题|require("./images/youIcon.png")
|leftFun|React.PropTypes.func|func|左边的点击事件|
|leftIcon|React.PropTypes.any| or {uri: "https://yousite.com/images/icon.png"}|图片(本地和远程uri都可以)|"your title"
|leftTitle|React.PropTypes.string||文本标题|require("./images/youIcon.png")
|rightFun| React.PropTypes.func|func|左边的点击事件|
|rightIcon|React.PropTypes.any| or {uri: "https://yousite.com/images/icon.png"}|图片(本地和远程uri都可以)|"your title"
|rightTitle|React.PropTypes.string||文本标题|"red"`|title标题颜色|
|titleColor|React.PropTypes.any|
| Android | iOS | iPhone X |
|:---:|:---:|:---:|
|!图片|!图片|!图片|