找回密码
 立即注册
首页 其他语言 android 查看内容
基于路由的不同状态栏配置
如果你没有导航标题栏,或导航标题栏会根据路由改变颜色,则需要确保内容使用正确的颜色。

Stack navigator 和 Drawer navigator
使用 Stack navigator 或 Drawer navigator 是一项简单的任务。 你可以简单地渲染由 React Native 提供的StatusBar组件,并设置你的配置。
class Screen1 extends React.Component {
  render() {
    return (
      <SafeAreaView style={[styles.container, { backgroundColor: '#6a51ae' }]}>
        <StatusBar
          barStyle="light-content"
          backgroundColor="#6a51ae"
        />
        <Text style={[styles.paragraph, { color: '#fff' }]}>
          Light Screen
        </Text>
        <Button
          title="Next screen"
          onPress={() => this.props.navigation.navigate('Screen2')}
          color={isAndroid ? "blue" : "#fff"}
        />
      </SafeAreaView>
    );
  }
}

class Screen2 extends React.Component {
  render() {
    return (
      <SafeAreaView style={[styles.container, { backgroundColor: '#ecf0f1' }]}>
        <StatusBar
          barStyle="dark-content"
          backgroundColor="#ecf0f1"
        />
        <Text style={styles.paragraph}>
          Dark Screen
        </Text>
        <Button
          title="Next screen"
          onPress={() => this.props.navigation.navigate('Screen1')}
        />
      </SafeAreaView>
    );
  }
}
export default createStackNavigator({
  Screen1: {
    screen: Screen1,
  },
  Screen2: {
    screen: Screen2,
  },
}, {
  headerMode: 'none',
});
1203.gif
export default createDrawerNavigator({
  Screen1: {
    screen: Screen1,
  },
  Screen2: {
    screen: Screen2,
  },
});
6666.gif
TabNavigator
如果你使用的是 TabNavigator,则会更复杂一些,因为所有 tab 上的页面都要同时渲染 - 这意味着你将使用你设置的最后一个StatusBar进行配置(可能位于 tab navigator 的最后一个 tab,并不是你想让用户看到的)。

为了解决这个问题,我们必须做两件事
  • 仅在我们的初始页面上使用StatusBar组件。 这使我们可以确保使用正确的StatusBar配置。
  • 当一个 tab 处于激活状态时,利用 React Navigation 和StatusBar的隐式API中的事件系统更改StatusBar配置。

首先,新的Screen2.js将不再使用StatusBar组件。
class Screen2 extends React.Component {
  render() {
    return (
      <SafeAreaView style={[styles.container, { backgroundColor: '#ecf0f1' }]}>
        <Text style={styles.paragraph}>
          Dark Screen
        </Text>
        <Button
          title="Next screen"
          onPress={() => this.props.navigation.navigate('Screen1')}
        />
        {/* <Button
          title="Toggle Drawer"
          onPress={() => this.props.navigation.navigate('DrawerToggle')}
        /> */}
      </SafeAreaView>
    );
  }
}
然后,在Screen1.js和Screen2.js中,我们将设置一个监听器来更改StatusBar的配置,当 tab 处于 didFocus状态。 当TabNavigator已被卸载时,我们还会确保删除该监听器。
class Screen1 extends React.Component {
  componentDidMount() {
    this._navListener = this.props.navigation.addListener('didFocus', () => {
      StatusBar.setBarStyle('light-content');
      isAndroid && StatusBar.setBackgroundColor('#6a51ae');
    });
  }

  componentWillUnmount() {
    this._navListener.remove();
  }

  ...
class Screen2 extends React.Component {
  componentDidMount() {
    this._navListener = this.props.navigation.addListener('didFocus', () => {
      StatusBar.setBarStyle('dark-content');
      isAndroid && StatusBar.setBackgroundColor('#ecf0f1');
    });
  }

  componentWillUnmount() {
    this._navListener.remove();
  }

  ...
}
565.gif
Demo 中用到的代码片段
分享至 : QQ空间
收藏

0 个回复

您需要登录后才可以回帖 登录 | 立即注册