我正在构建一个注册表单,我想添加图标,但图标应该在不同平台上看起来不同,例如,如果我使用Ionicons,它应该在ios设备上显示ios-person,在Android设备上显示md-person。我如何构建这样的自定义组件,所以我只需在我的注册屏幕表单中导入它,并添加一个基于文本输入的图标,就像名字的人一样。
您可以根据平台确定图标,如下所示:
import { Platform } from 'react-native';
<Ionicons
name={Platform.select({
ios: 'ios-person',
android: 'md-person',
})}
/>
如果唯一的区别是ios
和md
。
<Ionicons
name={`${Platform.OS === "ios" ? "ios" : "md"}-person`}
/>
也许是可重用的组件,
const Icon = ({ name }) => (
<Ionicons
name={`${Platform.OS === "ios" ? "ios" : "md"}-${name}`}
/>
)
// Usage
<Icon name="person" />
再一次,这假设唯一不同的是ios
和md
。
编辑
根据每个平台更新name
和size
可以这样做
<Ionicons
{
...Platform.select({
ios: {
name: 'ios-person',
size: 25,
},
android: {
name: 'md-person',
size: 35
}
})
}
/>