Màu Thanh điều hướng và Thanh trạng thái Footer React Native
react-native-navbar-color
Gói đơn giản sẽ đặt màu thanh điều hướng chân trang.
Bạn cần cái này không?
Nếu có, bạn đang ở đúng nơi!!!
Cài đặt
Cài đặt các phụ thuộc và sau đó sau khi bắt đầu bộ đóng gói.
$ npm install --save react-native-navbar-color
Liên kết thư viện
Bạn cần đăng ký gói trong ứng dụng của bạn. làm theo các bước
Tự động
Sử dụng lệnh liên kết react-native để liên kết thư viện.
react-native link react-native-navbar-color
Thủ công
[REACT_NATIVE_PROJECT/android/app/src/main/java/PROJECT_ID/MainApplication.java]
Đảm bảo bạn bao gồm trong tệp MainApplication.java.
import com.bhavan.RNNavBarColor.RNNavBarColor;
Trong phương thức getPackages, thêm việc khởi tạo sau vào danh sách được trả về.
new RNNavBarColor()
[REACT_NATIVE_PROJECT/android/app/build.gradle]
Trong tệp build.gradle, thêm vào bên trong dependencies { …. }
compile project(':react-native-navbar-color')
[REACT_NATIVE_PROJECT/android/settings.gradle]
Trong tệp settings.gradle, thêm vào
include ':react-native-navbar-color'
project(':react-native-navbar-color').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navbar-color/android')
API
| Phương thức | Tham số | Mặc định | Loại | Mô tả | Nền tảng |
|---|---|---|---|---|---|
| setColor | hexcolor | – | String | Màu Navbar trong định dạng hex dưới dạng chuỗi | Android và API_Level >=21 |
| setStatusBarColor | hexcolor, animation | – , true |
String,Boolean | Màu Thanh trạng thái trong định dạng hex, Hiển thị hoạt hình đúng/sai | Android |
| setStatusBarTheme | một trong số light/dark/default , animation |
default,true |
String , Boolean | Chủ đề Thanh trạng thái Sáng/Tối/Mặc định trong String , Hiển thị hoạt hình đúng/sai | Android/iOS |
Ví dụ
Đây là cách bạn có thể đặt màu thanh điều hướng chân trang trong Android.
Nhập gói từ node_modules
import NavigationBar from 'react-native-navbar-color'
phương thức để đặt màu nav
NavigationBar.setColor('#ffab8e')
phương thức để đặt màu thanh trạng thái
NavigationBar.setStatusBarColor('#ffab8e',false)
phương thức để đặt chủ đề thanh trạng thái
NavigationBar.setStatusBarTheme('dark',true)
Đây là ví dụ đầy đủ.
import React, { Component } from 'react'
import { View, Text } from 'react-native'
import NavigationBar from 'react-native-navbar-color'
export default class App extends Component {
componentDidMount() {
NavigationBar.setColor('#ffab8e')
}
render() {
return (
<View>
<Text>
This is how we can set the navigation bar color!
</Text>
</View>
)
}
}
Kết quả
Công việc cần làm
- Viết thêm các phương pháp tốt hơn
Chi tiết tải về:
Tác giả: BhavanPatel
Nguồn: https://github.com/BhavanPatel/react-native-navbar-color
Giấy phép: MIT license
