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

Question

我正在使用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 。

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

Answer 1

正如@Darpan Rangari在评论中提到的， 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() {}
}

Answer 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