如何在反应导航中将标题移动到stackNavigator的底部？答案

【问题标题】：How to move header to bottom in stackNavigator in react-navigation?如何在反应导航中将标题移动到stackNavigator的底部？
【发布时间】：2020-01-02 22:55:11
【问题描述】：

我正在使用react-navigation。我想要createStackNavigator 样式导航，但我只希望标题位于屏幕底部而不是顶部。似乎在不制作自己的导航器的情况下获得底部导航栏的唯一方法是使用createBottomTabNavigator。我正在制作一个流程，一个屏幕接着另一个屏幕，直到它结束。

headerStyle 属性不采用定位属性，例如 bottom、top、left。

根据这里的一些建议，这就是我现在所拥有的。

import BottomStackNavigationView from '../components/BottomStackNavigationView'

export default class MyScreen extends Component {
  static navigationOptions = {
    title: 'giraffe',
    headerTitle: 'monkey',
    headerBackTitle: 'c3po',
    header: (props) => <BottomStackNavigationView {...props} />,
  }

  render() {}

我在我的 BottomStackNavigationView 中记录了我得到的道具，但它看起来不像我得到的那样，例如，headerTitle、title 或 headerBackTitle。

有没有比制作自定义导航器更好的方法？

【问题讨论】：

标签： reactjs react-native react-navigation react-navigation-stack

【解决方案1】：

正如 @Darpan Rangari 在 cmets 中所提到的，position: absolute 在 headerStyle 中不可用，所以下面的解决方案应该可以工作。

试试这个：

export default class MyScreen extends Component {
  static navigationOptions = {
    header: (navigationOptions) => (<View style={{position:"absolute", bottom: 0, height: 80, width: "100%", backgroundColor: "#dbdbdb"}}><Text>{navigationOptions.headerTitle}</Text></View>); //this is your custom header

  render() {}
}

【讨论】：

headerStyle 不支持绝对位置。
试过了，只是在这种情况下不渲染标题。
@FilippoArgenti 我没有给自定义视图提供height 和backgroundColor。试着给它看看。（编辑：在代码中进行了编辑，应用编辑后的版本并查看）。
@DarpanRangari 我找不到任何参考。 See this，没有提到任何道具受到限制。也许你检查了代码？
我在本地运行了一个代码，我可以看到在抛出警告“绝对位置不支持 headerStyle”的反应

【解决方案2】：

我的堆栈导航器底部也需要一个页脚。当bottom: 0不起作用时，我找到了我的屏幕高度，并使用：

import React from 'react'
import { createStackNavigator } from 'react-navigation-stack'
import { Dimensions, View, Text } from 'react-native';

const styles = {
  position: 'absolute',
  width: '100%',
  height: 130,
  top: Dimensions.get('window').height-130,
  backgroundColor: 'orange',
}

const A = props => (
  <Text style={{width: '50%', height: 200, backgroundColor: 'green'}}
    onPress={() => props.navigation.navigate('B')} />
)

const EventCreationStack = createStackNavigator(
  {
    A: {screen: A},
    B: {screen: A},
  },
  {
    defaultNavigationOptions: {
      header: props => <View style={styles} />,
    },
  }
)

export default EventCreationStack

【讨论】：