Javascript 如何在我的react native应用程序中添加NativeBase页脚？

我是个新手。我想在我的应用程序中添加页脚栏。 以下是我在dashboard.js文件中的完整代码，但它不起作用：-

import React, { memo } from 'react';
import Background from '../components/Background';
import Logo from '../components/Logo';
import Header from '../components/Header';
import Paragraph from '../components/Paragraph';
import Button from '../components/Button';

import {Container, Footer, Title, Icon} from 'native-base';


const Dashboard = ({ navigation }) => (
  <Background>
    <Logo />
    <Header>Let’s start</Header>
    <Paragraph>
      Your amazing app starts here. Open you favourite code editor and start
      editing this project.
    </Paragraph>
    <Button mode="outlined" onPress={() => navigation.navigate('HomeScreen')}>
      Logout
    </Button>

    **<Container>
                <Footer>
                    <Button transparent>
                        <Icon size={30} color={'#fff'} name={'ios-telephone'} />
                    </Button>
                    <Title>Footer</Title>
                    <Button transparent >
                        <Icon size={25} color={'#fff'} name={'chatbox'}/>
                    </Button>
                </Footer>
            </Container>**
  </Background>

);

export default memo(Dashboard);

---

但是我不知道如何在我的代码中添加这个，任何人都可以为此提供帮助吗？谢谢

首先，在加载数据之前，需要将初始状态保持为false

state = {
    isReady: false
  }

然后在componentDidMount中，您可以加载数据&当加载数据时，更改状态

async componentDidMount() {
    try {
      await Font.loadAsync({
        Roboto: require('native-base/Fonts/Roboto.ttf'),
        Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
        ...Ionicons.font,
      });
      this.setState({ isReady: true })
    } catch (error) {
      console.log('error loading fonts', error);
    }
  }

最后呈现您的数据

render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {
          this.state.isReady ?
            <Text style={{ fontFamily: 'Roboto', fontSize: 56 }}>Hello, world!</Text>
            :
            <View style={{ flex: 1, padding: 20 }}>
              <ActivityIndicator />
            </View>
        }
      </View>
    )
  }

render（）{
返回(
{
这个州准备好了吗？
你好，世界！
:
}
)
}

---

您可以对功能组件应用相同的场景，但是使用useffect（）而不是componentDidMount（）

我是否应该将代码更改为类组件而不是功能组件？那我来教你怎么做it@GauravRoy目前我有一个登录页面，登录后将重定向到此页面（Dashboard.js）。在更改类组件后，您的更改是否会影响此？你可以给我看看你的解决方案，我会努力的。。。谢谢。嗨@SDushan，我也看到了这个解决方案，但我不知道如何嵌入这个代码

const Dashboard=（{navigation}）=>（

render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {
          this.state.isReady ?
            <Text style={{ fontFamily: 'Roboto', fontSize: 56 }}>Hello, world!</Text>
            :
            <View style={{ flex: 1, padding: 20 }}>
              <ActivityIndicator />
            </View>
        }
      </View>
    )
  }