时间戳

首页 > 解决方案 > 反应导航中的自定义标题问题

javascript - 反应导航中的自定义标题问题

问题描述

我正在尝试使用反应导航制作自定义标题，但我无法获得正确的结果。我希望红色视图覆盖所有蓝色视图，但我无法弄清楚。

这是一张图片

我的 HomeStack.js：

const screens = {
  Home: {
    screen: HomeScreen,
  }
}

const options = {
  defaultNavigationOptions: {
    headerTitle: () => <Header/>,
    headerStyle: {
      backgroundColor: 'lightblue',
      height: 60,
      }
  }
}

const HomeStack = createStackNavigator(screens, options)

const Navigator = createAppContainer(HomeStack)

export default Navigator

我的 Header.js：

class Header extends Component {
  render() {
    return(
      <View style={style.conteiner}>
        <Text style={style.text}>Text</Text>
      </View>
    )
  }
}


const style = StyleSheet.create({
  conteiner: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'red',
  },
  text: {
    color: '#fff',
    fontSize: 20,
  }
})


export default Header

标签： javascriptreact-nativereact-navigation

解决方案

如果我理解正确，那么您想为整个标题定义一个自定义组件。您正在使用自定义标头组件进行设置headerTitle：

const options = {
    defaultNavigationOptions: {
    headerTitle: () => <Header/>, <-- here
    headerStyle: {
    backgroundColor: 'lightblue',
    height: 60,
}

这是关于headerTitle的文档所说的：

有时，您需要的不仅仅是更改标题的文本和样式，还需要更多的控制——例如，您可能想要渲染图像来代替标题，或者将标题变成一个按钮。在这些情况下，您可以完全覆盖用于标题的组件并提供您自己的组件。

此选项仅用于替换标题组件，而不是整个标题。除非您有一些非常具体的要求，否则您可能会使用和的组合来实现您正在寻找的headerStyle目标。headerTintColorheaderTitle

推荐阅读