React native 与react导航一起使用时全局页脚的位置错误

我的问题很基本。我想在一个全局页脚上的React原生应用程序中有一个StackNavigator。 这是my base App.js的代码：

import React, { Component } from "react";
import { View, Text } from "react-native";
import { createStackNavigator } from "react-navigation";

class TestScreen extends Component {
  render() {
    return (
      <View style={{}}>
        <Text>
          Hello, WorldHello, WorldHello, WorldHello, WorldHello, WorldHello,
          WorldHello, WorldHello, WorldHello, WorldHello, WorldHello,
          WorldHello, WorldHello, WorldHello, WorldHello, WorldHello,
          WorldHello, WorldHello, WorldHello, WorldHello, WorldHello,
          ...
          WorldHello, WorldHello, WorldHello, WorldHello, WorldHello,
          WorldHello, WorldHello, WorldHello, WorldHello, WorldHello,
          WorldHello, WorldHello, WorldHello, WorldHello, WorldHello,
          WorldHello, WorldHello, WorldHello, WorldHello, World
        </Text>
      </View>
    );
  }
}

const Stack = createStackNavigator(
 {
   Test: { screen: TestScreen }
 },
 {}
);

class App extends Component {
  render() {
    return (
      <View>
        <View>
            <Stack />
        </View>
        <View style={{backgroundColor: 'orange', height: 50}}/>
      </View>
    );
  }
}

export default App;

import React，{Component}来自“React”；
从“react native”导入{View，Text}；
从“反应导航”导入{createStackNavigator}；
类TestScreen扩展组件{
render（）{
返回(
你好，世界你好，世界你好，世界你好，世界你好，世界你好，世界你好，
世界你好，世界你好，世界你好，世界你好，世界你好，
世界你好，世界你好，世界你好，世界你好，世界你好，
世界你好，世界你好，世界你好，世界你好，世界你好，
...
世界你好，世界你好，世界你好，世界你好，世界你好，
世界你好，世界你好，世界你好，世界你好，世界你好，
世界你好，世界你好，世界你好，世界你好，世界你好，
世界你好，世界你好，世界你好，世界你好，世界你好，世界
);
}
}
const Stack=createStackNavigator(
{
测试：{screen:TestScreen}
},
{}
);
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

如您所见，它是一个简单的视图，包含一个内容视图（包含堆栈导航器）和一个高度为50的橙色页脚视图。当然，我原来的应用程序更复杂。代码被简化以显示问题。 问题是页脚显示在堆栈组件的顶部：

如果我不使用stack navigator，而是直接使用TestScreen，则一切正常：

  render() {
    return (
      <View>
        <View>
            <TestScreen />
        </View>
        <View style={{backgroundColor: 'orange', height: 50}}/>
      </View>
    );
  }

render（）{
返回(
);
}

这可能是react导航中的一个错误，还是我缺少了一些flexbox的魔力？

更新： 看看CreateBoottomTabNavigator:or。他们似乎在做你要求的事情。您可以定义所有管线，并在一个位置创建可视页脚

这是我对航海家的看法，如果我错了，请纠正我。

导航器不应该用作组件，它比组件抽象得多。它帮助应用程序中的组件找到彼此，连接点。StackNavigator是一个导航器，它将每个连接的视图放在最后一个视图的顶部，因此您只需按后退按钮即可返回

如果已创建具有多个屏幕的堆栈导航器“stack”，则可以在应用程序类中使用它：

return（）

。你不需要其他任何东西。现在，您放在堆栈导航器中的第一个屏幕将首先显示，它可以到达任何其他屏幕：

onPress={（）=>this.props.navigation.navigate（'Screen2'）}

因此，导航器比视图更抽象，您应该单独创建一个使用导航器的视图，而不是直接将其作为组件使用。例如：

import React, { Component } from "react";
import {
  View,
  Text,
  ScrollView,
  TouchableWithoutFeedback
} from "react-native";
import Icon from 'react-native-vector-icons/Entypo'
import { createStackNavigator } from "react-navigation";

class Footer extends Component {
  render() {

    console.log(this.props.navigation)
    const { active, navigation } = this.props;
    const currentScreen = this.props.navigation.state.routeName;
    return (
      <View
        style={{
          padding: 10,
          paddingHorizontal: 40,
          justifyContent: 'space-between',
          alignItems: 'center',
          marginBottom: 0,
          height: '10%',
          backgroundColor: 'white',
          borderTopWidth: 1,
          borderColor: 'rgba(0,0,0,0.15)',
          flexDirection: 'row'
        }}>

        <TouchableWithoutFeedback onPress={() => navigation.navigate('Screen1')}>
          <Icon name='list' size={20} color={ currentScreen === 'Screen1' ? 'black' : 'rgba(0,0,0,0.3)'} />
        </TouchableWithoutFeedback>
        <TouchableWithoutFeedback onPress={() => navigation.navigate('Screen2')}>
          <Icon name='add-to-list' size={20} color={ currentScreen === 'Screen2' ? 'black' : 'rgba(0,0,0,0.3)'} />
        </TouchableWithoutFeedback>
        <TouchableWithoutFeedback onPress={() => navigation.navigate('Screen3')}>
          <Icon name='add-to-list' size={20} color={ currentScreen === 'Screen3' ? 'black' : 'rgba(0,0,0,0.3)'} />
        </TouchableWithoutFeedback>
        <TouchableWithoutFeedback onPress={() => navigation.navigate('Screen4')}>
          <Icon name='add-to-list' size={20} color={ currentScreen === 'Screen4' ? 'black' : 'rgba(0,0,0,0.3)'} />
        </TouchableWithoutFeedback>
      </View>
    )
  }
}
export class Screen1 extends Component {

  render() {
    return (
      <View style={{ flex: 1 }}>
        <ScrollView>
          <Text>
            Screen 1
        </Text>
        </ScrollView>
        <Footer navigation={this.props.navigation} />
      </View>
    );
  }
}

export class Screen2 extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <ScrollView>
          <Text>
            Screen 2
        </Text>
        </ScrollView>
        <Footer navigation={this.props.navigation} />
      </View>
    );
  }
}

export class Screen3 extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <ScrollView>
          <Text>
            Screen 3
        </Text>
        </ScrollView>
        <Footer navigation={this.props.navigation} />
      </View>
    );
  }
}

export class Screen4 extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <ScrollView>
          <Text>
            Screen 4
        </Text>
        </ScrollView>
        <Footer navigation={this.props.navigation} />
      </View>
    );
  }
}

const Stack = createStackNavigator(
  {
    Screen1,
    Screen2,
    Screen3,
    Screen4      }
);

export default class App extends Component {
  render() {
    return (
      <Stack />
    );
  }
}

import React，{Component}来自“React”；
进口{
看法
文本，
滚动视图，
无反馈可触摸
}从“反应本族语”；
从“react native vector icons/Entypo”导入图标
从“反应导航”导入{createStackNavigator}；
类页脚扩展组件{
render（）{
console.log（this.props.navigation）
const{active，navigation}=this.props；
const currentScreen=this.props.navigation.state.routeName；
返回(
导航。导航（'Screen1'）}>
导航。导航（'Screen2'）}>
导航。导航（'Screen3'）}>
导航。导航（'Screen4'）}>
)
}
}
导出类Screen1扩展组件{
render（）{
返回(
屏幕1
);
}
}
导出类Screen2扩展组件{
render（）{
返回(
屏幕2
);
}
}
导出类Screen3扩展组件{
render（）{
返回(
屏幕3
);
}
}
导出类Screen4扩展组件{
render（）{
返回(
屏幕4
);
}
}
const Stack=createStackNavigator(
{
屏幕1，
屏幕2，
屏幕3，
屏幕4}
);
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}

非常感谢您的意见。我希望避免在我的每个组件中反复添加相同的页脚。在容器组件中使用全局页脚（和页眉）会更简单。也许那是不可能的。我只是看到其他人也尝试过这个，而且似乎对他们有效：我明白了！可能有一种方法，但我见过的拥有外部和自定义标题的人总是将其添加到每个组件中（通过这种方法，他们可以为其提供不同的道具，使其看起来不同，这取决于他们告诉它的内容）。尽管如此，您仍然可以使它比我最初建议的要少，并更新了我的答案，以便尽可能多地删除重复代码。