如何解决android Wix-Navigation中带有图标的React-native问题,在iOS中工作正常
有一个问题,在ios中显示图标正确显示,但是在android中,尺寸减小了,我在React-native中使用Wix导航,所有其他图标在两个平台上均显示完美,但是在导航中添加的图标具有问题
以下是底部标签的代码
const HomeIcon = require("../assets/images/tabs/home_off.png");
const HomeIconSelected = require("../assets/images/tabs/home_on.png");
const HomeIconx = require("../assets/images/home_off.png");
const HomeIconSelectedx = require("../assets/images/home_on.png");
const MessageIcon = require("../assets/images/tabs/chat_off.png");
const MessageIconSelected = require("../assets/images/tabs/chat_on.png");
const MessageIconx = require("../assets/images/chat_off.png");
const MessageIconSelectedx = require("../assets/images/chat_on.png");
const PostIcon = require("../assets/images/tabs/edit.png");
const PostIconSelected = require("../assets/images/tabs/edit.png");
const PostIconx = require("../assets/images/edit_home.png");
const PostIconSelectedx = require("../assets/images/edit_home.png");
const ProfileIcon = require("../assets/images/tabs/profile_off.png");
const ProfileIconSelected = require("../assets/images/tabs/profile_on.png");
const ProfileIconx = require("../assets/images/profile_off.png");
const ProfileIconSelectedx = require("../assets/images/profile_on.png");
const NotiIcon = require("../assets/images/tabs/notificatin_off.png");
const NotiIconSelected = require("../assets/images/tabs/notificatin_on.png");
const NotiIconx = require("../assets/images/notificatin_off.png");
const NotiIconSelectedx = require("../assets/images/notificatin_on.png");
Navigation.setRoot({
root: {
id: "root",sideMenu: {
id: "leftSideMenu",left: leftSideMenu("leftSideMenu",theme),center: {
bottomTabs: {
appStyle: {
forceTitlesDisplay: true,},titleDisplayMode: "alwaysShow",id: "bottomTabs",children: [
{
stack: zeroTabStack(
Platform.OS == "ios" ? HomeIcon : HomeIconx,Platform.OS == "ios" ? HomeIconSelected : HomeIconSelectedx,theme
),{
stack: firstTabStack(
Platform.OS == "ios" ? MessageIcon : MessageIconx,Platform.OS == "ios"
? MessageIconSelected
: MessageIconSelectedx,{
stack: secondTabStack(
Platform.OS == "ios" ? PostIcon : PostIconx,Platform.OS == "ios" ? PostIconSelected : PostIconSelectedx,{
stack: thirdTabStack(
Platform.OS == "ios" ? ProfileIcon : ProfileIconx,Platform.OS == "ios"
? ProfileIconSelected
: ProfileIconSelectedx,{
stack: fourthTabStack(
Platform.OS == "ios" ? NotiIcon : NotiIconx,Platform.OS == "ios" ? NotiIconSelected : NotiIconSelectedx,],});
导航标题代码
component: {
name: TERM_AND_CONDITIONS,passProps: {
name: "Settings",options: {
topBar: {
title: {
text: "Terms And Conditions",alignment: "center",color: color.text_color,fontFamily:
Platform.OS === "ios"
? "Roboto-Medium"
: "RobotoRegular",background: { color: color.background },backButton: {
icon: Images.back,showTitle: "hide",visible: true,bottomTabs: {
backgroundColor:
props.theme && props.theme === "dark"
? "#000"
: "#fff",
iOS
解决方法
即使未提供,似乎Android上的标题文本也是默认呈现的。我通过设置titleDisplayMode: 'alwaysHide'
Navigation.setRoot({
root: {
bottomTabs: {
children: [...],options: {
bottomTabs: {
titleDisplayMode: 'alwaysHide',},})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。