![](/img/trans.png)
[英]How to add icon to the date picker of nativebase components react native
[英]How to add in NativeBase footer in my react native app?
我是 React Native 的新手。 我想在我的應用程序中添加頁腳欄。 這是我在 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);
該錯誤表明字體家族問題是在 native-base 中引起的。
因此,我做了一些研究並得到了這個解決方案。
async componentDidMount() {
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 });
}
但我不知道如何在我的代碼中添加它,任何人都可以幫忙嗎? 贊賞。
首先,您需要將初始狀態保持為 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>
)
}
您可以對功能組件應用相同的場景,但使用 useEffect() 而不是 componentDidMount()
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.