关于使用react-native-router-flux构建了具有tab的主页，在使用StatusBar配置不同barStyle和backgroundColor时，状态栏展示不对的问题

整个RN工程使用了react-native-router-flux来做路由管理；
应用的主界面底部使用了tab进行分页。

					<Scene
                        key="Tabbar"
                        hideNavBar={true}
                        name="Tabbar"
                        showLabel={false}
                        lazy={false}
                        tabs={true}
                        tabBarOnPress={tabBarOnPress}
                        panHandlers={null}
                        tabBarStyle={tabBarStyle.tabbar}>

                        {/* 首页 */}
                        <Scene
                            key="Home"
                            component={Home}
                            initial={true}
                            hideNavBar={true}
                            tabBarLabel="首页"
                            icon={TabIcon}
                            iconImg={require('../assets/image/tabbar/tabbar_home_icon.png')}
                            iconActiveImg={require('../assets/image/tabbar/tabbar_home_icon_active.png')}
                        />
                        {/* 发布 */}
                        <Scene
                            key="Publish"
                            component={Publish}
                            hideNavBar={true}
                            tabBarLabel="发布"
                            icon={PlusIcon}
                            iconImg={require('../assets/image/tabbar/tabbar_plus_icon.png')}
                            iconActiveImg={require('../assets/image/tabbar/tabbar_plus_icon.png')}
                        />

                        {/* 个人中心 */}
                        <Scene
                            key="Account"
                            component={Account}
                            hideNavBar={true}
                            tabBarLabel="我的"
                            icon={TabIcon}
                            iconImg={require('../assets/image/tabbar/tabbar_account_icon.png')}
                            iconActiveImg={require('../assets/image/tabbar/tabbar_account_icon_active.png')}
                        />
                    </Scene>

然后Home页面和Account页面希望状态栏使用不同的颜色风格；
Home.js里面如下

 <Container style={[styles.container]} iosBarStyle="light-content" androidStatusBarColor="#65D3BA">
 ...
 </Container>

Account.js里面如下

<Container style={styles.container} iosBarStyle="dark-content" androidStatusBarColor="#ff0">
...
</Container>

这里的Container是简单封装了一下StatusBar 和 SafeAreaView。大致如下：


import { Container as NBContainer } from 'native-base';
...
	render() {
        const {
            androidStatusBarColor,
            iosBarStyle,
            style,
            transparent,
            translucent,
        } = this.props;

        return (
            <NBContainer /* style={style} */>
                <StatusBar
                    backgroundColor={androidStatusBarColor}
                    barStyle={iosBarStyle}
                    translucent={transparent ? true : translucent}
                />
                <SafeAreaView
                    style={[style]}
                >
                    <View ref={c => (this._root = c)} style={{ flex: 1 }} >
                        {this.props.children}
                    </View>
                </SafeAreaView>
            </NBContainer>
        );
    }

以IOS端为例，主页底部栏从左到右对应Home、Publish、Account页面，Home使用light-content的barStyle，Account使用了dark-content的barStyle。
理论上app启动后，初始化是进入Home页面，状态栏应该是light-content风格；但是设备上显示的是dark-content风格；
为了修正这个问题，尝试在Home的DidMount里面重新修改BarStyle，

	componentDidMount() {
        setTimeout(() => {
            Platform.OS === 'ios' ? StatusBar.setBarStyle('light-content') : StatusBar.setBackgroundColor('#65D3BA');
        }, 2000);
    }

这样的话，app启动后Home页面展示的确实是light-content风格。
但是如果此时在Home页面里，跳转到一个新的场景页面：

	Actions.AnotherPage()

不管AnotherPage里面如何设置barStyle，在退出这个AnotherPage()回到应用的主场景，不管是Home\Publish\Account页面，此时的barStyle只会是Account对应的dark-content风格。
这样感觉就有点奇怪了，明明我在Home的DidMount里面重新修改了barStyle为light-content，AnotherPage在退出以后，app的statusBar应该重置到我最后一次修改的light-content上。

现在只能看StatusBar的源码里到底是如何处理的了。

	react-native/Libraries/Components/StatusBar.js;

/**
   * Set the status bar style
   * @param style Status bar style to set
   * @param animated Animate the style change.
   */
  static setBarStyle(style: StatusBarStyle, animated?: boolean) {
    animated = animated || false;
    StatusBar._defaultProps.barStyle.value = style;
    if (Platform.OS === 'ios') {
      console.log('StatusBar ios setBarStyle _defaultProps', style)
      NativeStatusBarManagerIOS.setStyle(style, animated);
    } else if (Platform.OS === 'android') {
      NativeStatusBarManagerAndroid.setStyle(style);
    }
  }

/**
   * Set the background color for the status bar
   * @param color Background color.
   * @param animated Animate the style change.
   */
  static setBackgroundColor(color: string, animated?: boolean) {
    if (Platform.OS !== 'android') {
      console.warn('`setBackgroundColor` is only available on Android');
      return;
    }
    animated = animated || false;
    StatusBar._defaultProps.backgroundColor.value = color;

    const processedColor = processColor(color);
    if (processedColor == null) {
      console.warn(
        `\`StatusBar.setBackgroundColor\`: Color ${color} parsed to null or undefined`,
      );
      return;
    }
    console.log('StatusBar android setBackgroundColor _defaultProps', color)
    NativeStatusBarManagerAndroid.setColor(processedColor, animated);
  }

componentDidMount() {
  // Every time a StatusBar component is mounted, we push it's prop to a stack
  // and always update the native status bar with the props from the top of then
  // stack. This allows having multiple StatusBar components and the one that is
  // added last or is deeper in the view hierarchy will have priority.
  this._stackEntry = StatusBar.pushStackEntry(this.props);
}

componentWillUnmount() {
  // When a StatusBar is unmounted, remove itself from the stack and update
  // the native bar with the next props.
  StatusBar.popStackEntry(this._stackEntry);
}


/**
   * Push a StatusBar entry onto the stack.
   * The return value should be passed to `popStackEntry` when complete.
   *
   * @param props Object containing the StatusBar props to use in the stack entry.
   */
  static pushStackEntry(props: any): any {
    const entry = createStackEntry(props);
    StatusBar._propsStack.push(entry);
    StatusBar._updatePropsStack();
    return entry;
  }

  /**
   * Pop a StatusBar entry from the stack.
   *
   * @param entry Entry returned from `pushStackEntry`.
   */
  static popStackEntry(entry: any) {
    const index = StatusBar._propsStack.indexOf(entry);
    if (index !== -1) {
      StatusBar._propsStack.splice(index, 1);
    }
    StatusBar._updatePropsStack();
  }

/**
   * Updates the native status bar with the props from the stack.
   */
  static _updatePropsStack = () => {
  // Send the update to the native module only once at the end of the frame.
  clearImmediate(StatusBar._updateImmediate);
  StatusBar._updateImmediate = setImmediate(() => {
    console.log('_propsStack', StatusBar._propsStack.length, StatusBar._propsStack)
    console.log('_defaultProps', StatusBar._defaultProps)
    const oldProps = StatusBar._currentValues;
    const mergedProps = mergePropsStack(
      StatusBar._propsStack,
      StatusBar._defaultProps,
    );

    console.log('oldProps', StatusBar._currentValues)
    console.log('mergedProps', mergedProps)
    // Update the props that have changed using the merged values from the props stack.
    if (Platform.OS === 'ios') {
      if (
        !oldProps ||
        oldProps.barStyle.value !== mergedProps.barStyle.value
      ) {
        oldProps && console.log('oldProps.barStyle', oldProps.barStyle.value)
        console.log('mergedProps.barStyle', mergedProps.barStyle.value)
        NativeStatusBarManagerIOS.setStyle(
          mergedProps.barStyle.value,
          mergedProps.barStyle.animated || false,
        );
      }
      if (!oldProps || oldProps.hidden.value !== mergedProps.hidden.value) {
        NativeStatusBarManagerIOS.setHidden(
          mergedProps.hidden.value,
          mergedProps.hidden.animated
            ? mergedProps.hidden.transition
            : 'none',
        );
      }

      if (
        !oldProps ||
        oldProps.networkActivityIndicatorVisible !==
        mergedProps.networkActivityIndicatorVisible
      ) {
        NativeStatusBarManagerIOS.setNetworkActivityIndicatorVisible(
          mergedProps.networkActivityIndicatorVisible,
        );
      }
    } else if (Platform.OS === 'android') {
      if (
        !oldProps ||
        oldProps.barStyle.value !== mergedProps.barStyle.value
      ) {
        NativeStatusBarManagerAndroid.setStyle(mergedProps.barStyle.value);
      }
      if (
        !oldProps ||
        oldProps.backgroundColor.value !== mergedProps.backgroundColor.value
      ) {

        oldProps && console.log('oldProps.backgroundColor', oldProps.backgroundColor.value)
        console.log('mergedProps.backgroundColor', mergedProps.backgroundColor.value)
        const processedColor = processColor(
          mergedProps.backgroundColor.value,
        );
        if (processedColor == null) {
          console.warn(
            `\`StatusBar._updatePropsStack\`: Color ${
            mergedProps.backgroundColor.value
            } parsed to null or undefined`,
          );
        } else {
          NativeStatusBarManagerAndroid.setColor(
            processedColor,
            mergedProps.backgroundColor.animated,
          );
        }
      }
      if (!oldProps || oldProps.hidden.value !== mergedProps.hidden.value) {
        NativeStatusBarManagerAndroid.setHidden(mergedProps.hidden.value);
      }
      if (!oldProps || oldProps.translucent !== mergedProps.translucent) {
        NativeStatusBarManagerAndroid.setTranslucent(mergedProps.translucent);
      }
    }
    // Update the current prop values.
    StatusBar._currentValues = mergedProps;
  });
};

可以在每个函数入口处加下log，看下执行流程；
可以明确如果页面的render里面主动的配置了StatusBar，比如：

render() {
       
        return (
            <>
                <StatusBar barStyle={'light-content'} />
                <SafeAreaView style={[styles.container, { backgroundColor: '#65D3BA' }]} >
                   ...
                </SafeAreaView >
            </>
        );
    }

就会按照下面的流程执行：

componentDidMount()

	componentDidMount() {
  		console.log('StatusBar componentDidMount',this.props)
  		this._stackEntry = StatusBar.pushStackEntry(this.props);
	}

<Status>标签内配置的props属性，会被push到StatusBar静态类下的_propsStack中，并返回引用到_stachEntry中；

StatusBar.pushStackEntry(this.props)

	static pushStackEntry(props: any): any {
    	const entry = createStackEntry(props);
    	StatusBar._propsStack.push(entry);
    	StatusBar._updatePropsStack();
    	return entry;
  	}

上面传进来的props会被二次封装下，配置成一个属性比较完整的entry存放在_propsStack中，

StatusBar._updatePropsStack()
```
以IOS端为例，
```

	const oldProps = StatusBar._currentValues;
    const mergedProps = mergePropsStack(
      	StatusBar._propsStack,
      	StatusBar._defaultProps,
    );
    if (Platform.OS === 'ios') {
      if (
        !oldProps ||
        oldProps.barStyle.value !== mergedProps.barStyle.value
      ) {
        oldProps && console.log('oldProps.barStyle', oldProps.barStyle.value)
        console.log('mergedProps.barStyle', mergedProps.barStyle.value)
        NativeStatusBarManagerIOS.setStyle(
          mergedProps.barStyle.value,
          mergedProps.barStyle.animated || false,
        );
      }
   }
   ... 
   StatusBar._currentValues = mergedProps;

首先oldProp就是StatusBar._currentValues，mergedProps是待更新的StatusBar的属性，更新完成后也会被赋值到StatusBar._currentValues中，
看下如何计算出mergedProps：

/**
 * Merges the prop stack with the default values.
 */
function mergePropsStack(
  propsStack: Array<Object>,
  defaultValues: Object,
): Object {
  return propsStack.reduce((prev, cur) => {
    for (const prop in cur) {
      if (cur[prop] != null) {
        prev[prop] = cur[prop];
      }
    }
    return prev;
  }, Object.assign({}, defaultValues));
}

具体操作就是默认使用StatusBar._defaultProps，如果StatusBar._propsStack有push进新的props的话，就使用stack中最上面的一个props；
然后判断oldProp和mergedProps中的barStyle是否相同，只有不相同的时候，才会调用

	NativeStatusBarManagerIOS.setStyle(
          mergedProps.barStyle.value,
          mergedProps.barStyle.animated || false,
        );

这样配置了StatusBar的新页面状态栏会更新成指定的风格；

页面退出时的执行流程

1. componentWillUnmount

componentWillUnmount() {
  // When a StatusBar is unmounted, remove itself from the stack and update
  // the native bar with the next props.
  StatusBar.popStackEntry(this._stackEntry);
}

this._stackEntry是之前pushStackEntry返回的props对象；

2. StatusBar.popStackEntry(this._stackEntry)

static popStackEntry(entry: any) {
    const index = StatusBar._propsStack.indexOf(entry);
    if (index !== -1) {
      StatusBar._propsStack.splice(index, 1);
    }
    StatusBar._updatePropsStack();
  }

此处就是在当前的StatusBar._propsStack中找到entry对应的索引，并移除，然后更新props

StatusBar._updatePropsStack()；
```
已经介绍过了 ，不再赘述。
```

至此，通过页面内配置<StatusBar>的的方式设置barStyle的流程梳理完了。

回到Home的DidMount中，我调用了StatusBar.setBarStyle('light-content')来修正；
看下StatusBar.setBarStyle具体做了什么

  /**
   * Set the status bar style
   * @param style Status bar style to set
   * @param animated Animate the style change.
   */
  static setBarStyle(style: StatusBarStyle, animated?: boolean) {
    animated = animated || false;
    StatusBar._defaultProps.barStyle.value = style;
    if (Platform.OS === 'ios') {
      // console.log('StatusBar ios setBarStyle _defaultProps', style)
      NativeStatusBarManagerIOS.setStyle(style, animated);
    } else if (Platform.OS === 'android') {
      NativeStatusBarManagerAndroid.setStyle(style);
    }
  }

这里比较简单，只是修正了一下StatusBar._defaultProps.barStyle的值
然后就直接调用native接口生效了。

	NativeStatusBarManagerIOS.setStyle(style, animated);

对比一下两种方式，就可以发现其中的差异；

通过js接口修改barStyle，值会保存在StatusBar._defaultProps中；
通过<StatusBar>标签属性配置barStyle，值会push到StatusBar._propsStack堆栈的栈顶，然后通过mergePropsStack来取值
mergePropsStack的规则是如果_propsStack中没有值就取_defaultProps，如果_propsStack有值，就取_propsStack栈顶的props

通过log，将启动时候的几个关键方法中的参数打印出来：

[Wed Jun 24 2020 19:40:29.771]  LOG      Running "BaseApp" with {"rootTag":41,"initialProps":{}}
[Wed Jun 24 2020 19:40:29.771]  LOG      Home componentWillMount ios
[Wed Jun 24 2020 19:40:29.772]  LOG      Account render account {}
[Wed Jun 24 2020 19:40:29.773]  LOG      StatusBar componentDidMount {"animated": false, "backgroundColor": "#65D3BA", "barStyle": "light-content", "showHideTransition": "fade", "translucent": undefined}
[Wed Jun 24 2020 19:40:29.773]  LOG      StatusBar componentDidMount {"animated": false, "backgroundColor": "#ff0", "barStyle": "dark-content", "showHideTransition": "fade", "translucent": undefined}
[Wed Jun 24 2020 19:40:29.773]  LOG      Account componentDidMount
[Wed Jun 24 2020 19:40:29.774]  LOG      _propsStack 2 [{"backgroundColor": {"animated": false, "value": "#65D3BA"}, "barStyle": {"animated": false, "value": "light-content"}, "hidden": null, "networkActivityIndicatorVisible": undefined, "translucent": undefined}, {"backgroundColor": {"animated": false, "value": "#ff0"}, "barStyle": {"animated": false, "value": "dark-content"}, "hidden": null, "networkActivityIndicatorVisible": undefined, "translucent": undefined}]
[Wed Jun 24 2020 19:40:29.774]  LOG      _defaultProps {"backgroundColor": {"animated": false, "value": "black"}, "barStyle": {"animated": false, "value": "default"}, "hidden": {"animated": false, "transition": "fade", "value": false}, "networkActivityIndicatorVisible": false, "translucent": false}
[Wed Jun 24 2020 19:40:29.774]  LOG      oldProps null
[Wed Jun 24 2020 19:40:29.775]  LOG      mergedProps.barStyle dark-content
[Wed Jun 24 2020 19:40:31.628]  LOG      StatusBar ios setBarStyle _defaultProps light-content

这里遇到的一个比较奇怪的问题就是启动时，同时加载了Home和Account页面，StatusBar里面的_propsStack中push进了两个页面中配置的props；

可以看到stack数组中第一个是light-content，第二个是dark-content，
oldProps是StatusBar._currentValues，初始的时候是null，
StatusBar._defaultProps初始的时候是配置了默认值的。为default;
这样计算出来的mergedProps.barStyle 为dark-content，即stack的栈顶props;

也就是说这种情况下，app虽然展示的是Home页面，但是StatusBar的风格是最后一个加载的Account页面中配置的dark-content风格；
然后Home的DidMount中主动设置了StatusBar.setBarStyle('light-content')

log中对应的修改了_defaultProps为 light-content，可以看下时间戳。

这样app启动后，展示的即是Home页面，且StatusBar是对应的light-content风格。

1、然后我们发现在切换tab，在Home和Account页面来回切换，没有任何log输出了。也就是说通过react-native-router-flux配置的带tab的主场景</Scene>，在来回切换的时候，不会触发StatusBar的componentDidMount，也就不会更新StatusBar._propsStack。
2、那么此时如果打开一个新的使用<StatusBar>标签的AnotherPage页面，StatusBar._propsStack栈顶会加入一个新的props，然后通过mergedProps()，会取值到栈顶的props，使新加入的props配置生效；
3、AnotherPage退出的时候，StatusBar._propsStackpop掉新加入的props，重新进行进行mergedProps()，比较StatusBar._propsStack和StatusBar._defaultProps会取值到stack栈顶props，也就是Account对应的配置，使之生效。

这样就解释了Home启动后，状态栏修正为light风格，但是打开一个新的页面并退出，虽然页面是Home但是状态栏变成了dark风格的原因。

个人感觉原因就是通过接口形式StatusBar.setBarStyle()配置StatusBar，要比通过标签形式配置，权重要低。另外就是react-native-router-flux中页面切换不修改stack导致的。

解决方法：

对于这种方式配置的主页面，
1、使用StatusBar.pushStackEntry来替代StatusBar.setBarStyle，这样的话，StatusBar的属性控制完全都在StatusBar._propsStack中了，
2、在Home和Account页面来回切换的时候，主动修改StatusBar._propsStack，放弃默认加载生成的StatusBar._propsStack

修改后的代码如下
Home.js

componentWillMount() {
        console.log('Home componentWillMount', Platform.OS);

        this.didFocusListener = this.props.navigation.addListener(
            'didFocus',
            (obj) => {
                console.log('Home focus');
                setTimeout(() => {
                    let statusParams = {
                        barStyle: 'light-content',
                        backgroundColor: '#65D3BA',
                        animated: false,        // 必须指定这个参数，否则android端会报错
                        showHideTransition: 'fade', // 非必须指定这个参数，但是StatusBar里面默认是fade，最好也带上。
                    };
                    this.statusStyle = StatusBar.pushStackEntry(statusParams);
                }, 100);	//加了延迟，主要是didBlur要比didFocus早触发；
            }
        );
        this.didBlurListener = this.props.navigation.addListener(
            'didBlur',
            (obj) => {
                console.log('Home blur');
                if (this.statusStyle) {
                    StatusBar.popStackEntry(this.statusStyle);
                }
            }
        );
    }
    componentWillUnmount() {
        this.didFocusListener.remove();
        this.didBlurListener.remove();
    }

Account.js

componentWillMount() {
        this.didFocusListener = this.props.navigation.addListener(
            'didFocus',
            (obj) => {
                console.log('Account focus');
                setTimeout(() => {
                    let statusParams = {
                        barStyle: 'dark-content',
                        backgroundColor: '#ff0',
                        animated: false,        // 必须指定这个参数，否则android端会报错
                        showHideTransition: 'fade', // 非必须指定这个参数，但是StatusBar里面默认是fade，最好也带上。
                    };
                    this.statusStyle = StatusBar.pushStackEntry(statusParams);
                }, 100);
            }
        );
        this.didBlurListener = this.props.navigation.addListener(
            'didBlur',
            (obj) => {
                console.log('Account blur');
                if (this.statusStyle) {
                    StatusBar.popStackEntry(this.statusStyle);
                }
            }
        );
    }

    componentWillUnmount() {
        console.log('Account componentWillUnmount');
        this.didFocusListener.remove();
        this.didBlurListener.remove();
    }

至于不在主场景<Scene key="Tabbar">下的其他的<Scene>就不需要使用这种方式了，正常配置<StatusBar>标签即可正常切换状态栏

其实最正确的解决方式应该还是在react-native-router-flux中解决为啥tab形式的Scene页面切换的时候不修正StatusBar._propsStack。懒得看了，先这么解决了。

关于使用react-native-router-flux构建了具有tab的主页，在使用StatusBar配置不同barStyle和backgroundColor时，状态栏展示不对的问题

解决方法：

vue项目获取富文本编辑器wangEditor内容导出为word（html转word格式并下载）

dotnet C# 创建 X11 应用时设置窗口背景颜色

Navicat安装与激活教程

TDengine docker安装方法

vue3组件通信与props

sapui5

Alpine Linux apk add DNS lookup error

部分JDK版本的发布时间

工作中用到的脚本合集

合并代码时Beyond Compare设置

react-native-root-toast自定義彈窗

react-native-loader集成問題記錄

關於使用react-native-router-flux構建了具有tab的主頁，在使用StatusBar配置不同barStyle和backgroundColor時，狀態欄展示不對的問題

Linphone-android 登錄過程增加自定義消息頭流程分析

linphone呼出音頻電話時，錄音設備執行流程分析

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結