代码之家 › 专栏 › 技术社区 › Barry Michael Doyle

Android的React Navigation Stack Navigator Back按钮样式

stack-navigator react-navigation react-native

Barry Michael Doyle · 技术社区 · 7 年前

我实现了一个堆栈导航器,如下所示:

const MainNav = StackNavigator({
    notes: { screen: NotesScreen },
    addNote: { screen: AddNoteScreen }
}, {
    initialRouteName: 'notes'
});

现在当我从我的 NotesScreen 给我的 AddNoteScreen 我得到了预期的返回箭头。然而,我已经为 navigationOptions :

static navigationOptions = () => ({
    title: 'Add a note',
    headerStyle: {
        height: Platform.OS === 'android' ? 54 + STATUS_BAR_HEIGHT : 54,
        backgroundColor: '#2196F3'
    },
    headerTitleStyle: {
        marginTop: Platform.OS === 'android' ? STATUS_BAR_HEIGHT : 0,
        color: 'white'
    }
})

现在 headerTitleStyle 不会影响Android上的后退箭头。我怎样才能使android上的后退箭头采用与 ?

这是当前问题的图像:

2 回复 | 直到 7 年前

Ravi Raj 7 年前

有一个属性 头部颜色 在navigationOptions中,可用于更改后退按钮图标的颜色。除了现在没有其他选择定制后退按钮。

static navigationOptions = () => ({
    title: 'Add a note',
    headerStyle: {
        height: Platform.OS === 'android' ? 54 + STATUS_BAR_HEIGHT : 54,
        backgroundColor: '#2196F3'
    },
    headerTitleStyle: {
        marginTop: Platform.OS === 'android' ? STATUS_BAR_HEIGHT : 0,
        color: 'white'
    },
    headerTintColor: 'white'
})

顺便说一句,不要在标题样式中处理状态栏高度,只需在根组件内呈现react native的StatusBar组件,如

import {
  AppRegistry,
  View,
  StatusBar,
} from 'react-native';

class AppWithStatusBar extends Component {

  render() {
    return(
      <View style={{flex: 1}}>
        <StatusBar barStyle="light-content"/>
        <MainNav />
      </View>
    );
  }
}

AppRegistry.registerComponent('your_app', () => AppWithStatusBar);

Klaudia Brysiewicz 7 年前

为什么不在Android中隐藏状态栏呢

import { View, StatusBar } from 'react-native';

class App extends React.Component {

  render() {
    return (

     <View style={{flex : 1}}>
       <StatusBar hidden = {true}/>
       <Search/>
     </View>

    );
  }
}

推荐文章

user19476497 · 如何使用useState修改数组以使其成为React中的常数

2 年前

Muhammad Ashraf · 反应:过滤从具有特定键的对象数组中获取值,并将结果分组到数组中

2 年前

John · 如何确定Javascript自引用循环是否完成[重复]

2 年前

Herc · 将用户信息添加到firebase(注册)react native

2 年前

Bonhart · 有没有更好的方法按名称查找数组中的特定对象?

2 年前

ubermo · 如何在React本机自定义组件中使用状态?

2 年前

ramanujans alkhazarim · 错误“元素类型无效”React Native

2 年前

Audrey K · 有没有办法降级React Native?

2 年前

user15137953 · 已求解的对象作为React子对象无效。如果要渲染子级集合,请改用数组。反应

2 年前

Tedi · 如何将单个数据从子组件传递到父组件?

2 年前