1.0.1 • Published 7 years ago
react-native-navibar
Easy to customize your NavigationBar for ReactNative app.
Getting started
- Install the react-native-navibar from npm
npm install react-native-navibar --save
- Import it in the file where you want to use it
import NaviBar from 'react-native-navibar';
- Add it into the class, for example
export default class SecondVC extends Component {
render() {
return (
<View style = {{flex: 1}}>
<NaviBar
StatusBarStyle = 'default'
statusBarBackgroundColor = '#00f'
naviBackgroundColor = '#fff'
titleClickAction = {() => Alert.alert('It\'s facebook logo')}
titleImg = {{uri: titleImg}}
leftImgBtn1 = {NaviBackIcon}
leftBtn1Action = {() => this.props.navigator.pop()}
leftImgBtn2 = {{uri: webImg}}
leftBtn2Action = {() => Alert.alert('leftBtn2Action')}
rightTextBtn1 = 'world'
rightTextBtn1Color = '#f00'
rightBtn1Action = {() => Alert.alert('rightBtn1Action')}
rightImgBtn2 = {{uri: webImg}}
rightBtn2Action = {() => Alert.alert('rightBtn2Action')}
/>
<View style = {{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#726dd1'}}>
<Text>I am the SecondVC</Text>
<Text>try to click the 'Back' button and push to the first view</Text>
</View>
</View>
);
}
}
API
--StatusBar-- | Description |
---|
StatusBarStyle | 'default' or 'light-content' |
statusBarBackgroundColor |
--NaviBar-- | Description |
---|
naviBackgroundColor |
--TitleView-- | Description |
---|
title |
titleClickAction |
titleTextColor |
titleImg |
--LeftButtonGroup-- | Description |
---|
leftTextBtn1 |
leftTextBtn1Color |
leftImgBtn1 |
leftBtn1Action |
leftTextBtn2 |
leftTextBtn2Color |
leftImgBtn2 |
leftBtn2Action |
--RightButtonGroup-- | Description |
---|
rightTextBtn1 |
rightTextBtn1Color |
rightImgBtn1 |
rightBtn1Action |
rightTextBtn2 |
rightTextBtn2Color |
rightImgBtn2 |
rightBtn2Action |
If any bug found, please submit an issue!