Question

我的问题很基本。我想在全局页脚顶部的React Native应用程序中有一个StackNavigator。这是我的基本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;

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

如果我不使用堆栈导航器，而是直接使用TestScreen，那么一切都会按预期进行：

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

这可能是反应导航中的错误，还是我在这里缺少一些flexbox魔术？

Answer 1

更新：看一下createBottomTabNavigator：https://reactnavigation.org/docs/en/bottom-tab-navigator.html或https://reactnavigation.org/docs/en/material-bottom-tab-navigator.html。他们似乎正在按照您的要求做。您可以定义所有路线，并在一个地方创建可视页脚。

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

不应将Navigator用作组件，它比这要抽象得多。它可以帮助您的应用程序中的组件相互查找，连接点。 StackNavigator是一个导航器，它将每个连接的视图置于最后一个视图的顶部，这样您就可以通过仅按“后退”按钮来返回。

如果您创建了具有多个屏幕的堆栈导航器“ Stack”，则可以在您的App类return(<Stack />)中使用它。您不需要任何其他东西。现在，将首先显示您放入堆栈导航器的第一个屏幕，它可以访问其他任何屏幕：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 />
    );
  }
}

与反应导航一起使用时，全局页脚位置错误

1 个答案: