掌控你的App导航栏色彩：React Native Navigation Bar Color Change

import React, { Component } from 'react';
import { View, Text, StyleSheet, Platform } from 'react-native';
 
export default class NavigationBar extends Component {
  render() {
    const { color, title } = this.props;
    const navBarStyle = { ...styles.navBar, backgroundColor: color };
 
    return (
      <View style={navBarStyle}>
        <Text style={styles.title}>{title}</Text>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  navBar: {
    flex: 1,
    justifyContent: 'center',
    // 根据平台设置不同的状态栏的高度
    height: Platform.OS === 'ios' ? 64 : 56,
  },
  title: {
    color: 'white',
    fontSize: 20,
    alignSelf: 'center',
    margin: 15,
  },
});

这段代码定义了一个名为NavigationBar的React组件，它接收color和title两个属性，并根据接收的color属性来设置导航栏的背景色。在styles中定义了导航栏和标题的样式，并根据不同的平台设置了状态栏的高度。这个组件可以被用来在应用中实现不同场景下的导航栏色彩设置。