如何全屏显示页脚

Question

我有一个页脚，其中包含几个我想全屏显示的按钮。我正在使用以下代码：

    **//App.js**
    export default class App extends React.Component {
      constructor(props) {
        super(props);
      }
      render() {
        return (
          <View style={{flex: 1, backgroundColor: '#6ED4C8'}}>
            <AppNavigator />
            <View style={{flexDirection: 'row'}}>
              <Footer />
            </View>
          </View>
        );
      }
    }



    **//AppNavigator.js**
    const AppNavigator = createStackNavigator(
      {
        Home: {screen: Home},
        Friends: {screen: Friends},
        Login: {screen: Login},
        PostDatiles: {screen: PostDatiles},
        Aboutus: {screen: Aboutus},
        Footer: {screen: Footer},
      },
      {
        headerMode: 'none',
        navigationOptions: {
          headerVisible: false,
        },
        //  ,initialRouteName: ''
      },
    );
    export default AppNavigator;


    **//Footer.js**
     export default class Footer extends React.Component {
      constructor(props) {
        super(props);
      }

      render() {
        const {navigation} = this.props;
        return (
          <View style={styles.container}>
            <View>
              <Button
                title="About us"
                color="#39F80F"
                accessibilityLabel="Tap on Me"
                onPress={() => navigation.navigate('Login')}
              />
            </View>
            <View>
              <Button
                title="Login"
                color="#F8380F"
                accessibilityLabel="Tap on Me"
              />
            </View>
            <View>
              <Button
                title="Search"
                color="#B80FF8"
                accessibilityLabel="Tap on Me"
              />
            </View>
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      container: {
        flexDirection: 'row',
      },
    });

当我单击其中一个按钮时，我收到此错误： enter image description here

在 app.js 文件中，我使用页脚标签，因为我想在整个屏幕上显示它。

我搜索了很多，但找不到任何类似的问题！

Answer 1

要做你想做的事，你必须使用createBottomTabNavigator而不是StackNavigator。

示例

import React from 'react';
import { Text, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons'; // 6.2.2
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

class IconWithBadge extends React.Component {
  render() {
    const { name, badgeCount, color, size } = this.props;
    return (
      <View style={{ width: 24, height: 24, margin: 5 }}>
        <Ionicons name={name} size={size} color={color} />
        {badgeCount > 0 && (
          <View
            style={{
              // /If you're using react-native < 0.57 overflow outside of the parent
              // will not work on Android, see https://git.io/fhLJ8
              position: 'absolute',
              right: -6,
              top: -3,
              backgroundColor: 'red',
              borderRadius: 6,
              width: 12,
              height: 12,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>
              {badgeCount}
            </Text>
          </View>
        )}
      </View>
    );
  }
}

const HomeIconWithBadge = props => {
  // You should pass down the badgeCount in some other ways like context, redux, mobx or event emitters.
  return <IconWithBadge {...props} badgeCount={3} />;
};

const getTabBarIcon = (navigation, focused, tintColor) => {
  const { routeName } = navigation.state;
  let IconComponent = Ionicons;
  let iconName;
  if (routeName === 'Home') {
    iconName = `ios-information-circle${focused ? '' : '-outline'}`;
    // We want to add badges to home tab icon
    IconComponent = HomeIconWithBadge;
  } else if (routeName === 'Settings') {
    iconName = `ios-options${focused ? '' : '-outline'}`;
  }

  // You can return any component that you like here!
  return <IconComponent name={iconName} size={25} color={tintColor} />;
};

export default createAppContainer(
  createBottomTabNavigator(
    {
      Home: { screen: HomeScreen },
      Settings: { screen: SettingsScreen },
    },
    {
      defaultNavigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ focused, tintColor }) =>
          getTabBarIcon(navigation, focused, tintColor),
      }),
      tabBarOptions: {
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
      },
    }
  )
);