Native-base 在我的视图中不显示页脚组件 React-native

Question

在我看来，我正在尝试使用来自 native-base 的页脚组件，但是当我实现以下代码时我什么也看不到：Footer component native-base

我不知道这是否是一个错误，或者我是否需要在我的代码中实现一个附加选项。

我的代码：（我没有显示 Login.tsx 因为只在主页视图中使用页脚）'。

App.tsx

import {createStore} from 'redux';
import rootReducer from './Store/Reducers/Reducers';

const store = createStore(rootReducer);

export default class App extends React.Component {
  constructor(props) {
     super(props);
     this.state = { loading: true };
  }

  async componentDidMount() {
    await Font.loadAsync({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
    });
    this.setState({ loading: false });
  }

 render(){
   if (this.state.loading) {
      return (
        <Root>
          <AppLoading />
        </Root>
      );
   }
   else {
     return (
      <Provider store={store}>
        <Root>
          <NavigationContainer>
            <Navigator/>
          </NavigationContainer>
        </Root>
      </Provider>          
     );
   }
 }
}

Navigator.tsx

import React from 'react'
import { createStackNavigator } from '@react-navigation/stack'
import Login from '../Views/Login'
import Home from '../Views/Home'
import Register from '../Views/Register'

const Stack = createStackNavigator();

const Navigator= () =>{
   return (
        <Stack.Navigator>
            <Stack.Screen name="Login" component={Login}  options={{headerShown:false}}/>
            <Stack.Screen name="Home" component={Home} options={{title:'Home.'}}/>
            <Stack.Screen name="Register" component={Register} options={{title:'Register.'}}/>
        </Stack.Navigator>
   );
}

export default Navigator;

Home.tsx（这里只有页脚）

import React from 'react'
import {Footer, Icon, Button, Text, FooterTab, Container} from 'native-base'
import Styles from './Styles/HomeStyles'
import {connect} from 'react-redux'

const Home =(props) => {
   const {users} = props;
   return(
     <Container style={Styles.container}>
         {users.list !== undefined  && users.list.length>0 ? 
             users.list.map(user=> (
                <Text>Hello {user.nick}</Text>
             ))
             : null
         }
         <Footer>
            <FooterTab>
                <Button vertical>
                <Icon name="apps" />
                <Text>Apps</Text>
                </Button>
                <Button vertical>
                <Icon name="camera" />
                <Text>Camera</Text>
                </Button>
                <Button vertical active>
                <Icon active name="navigate" />
                <Text>Navigate</Text>
                </Button>
                <Button vertical>
                <Icon name="person" />
                <Text>Contact</Text>
                </Button>
            </FooterTab>
         </Footer>           
     </Container>
  );
}

const mapStateToProps=(state)=>{
  const {users} = state;
  return {users};
}

export default connect(mapStateToProps)(Home);

首页结果：

Answer 1

试试在Footer前加上Content，这样Content也是从native-base导入的，如果还是不行，试试去掉容器的样式

<Container>
      <Content><Text>dsdsds</Text></Content>
      <Footer>
         <Button vertical>
           <Icon name="apps" />
           <Text>Apps</Text>
         </Button>
      </Footer>           
</Container>

Native-base 在我的视图中不显示页脚组件 React-native

Native-base doesn't show footer component in my view React-native

view

footer

react-native

native-base

expo