I'm using an image (png) for the left button in NavigatorIOS and using a high resolution png which is 60x60. The menu image is rather too big. If I use size of 30x30 the menu button is blurry.
I also tried to use 60x60 and then used #2x or #3x but that didn't help.
Does anyone know how to use a high res images for button images in NavigatorIOS?
Code:
<NavigatorIOS
ref={(ref) => this._navigator = ref}
style={{flex: 1}}
navigationBarHidden={false}
tintColor={'#000'}
barTintColor = {'#D3D2DA'}
initialRoute={{
title: 'Hello World',
component: Home,
leftButtonIcon: require('./images/menu.png'),
onLeftButtonPress: () => { this._drawer.open() }
}}/>
Related
I'm trying to have a grid as a background using ImageKonva and filling it with a pattern.
The problem is that when I load the canvas, the ImageKonva looks completely black, and it shows up as soon as I add children elements.
import React from 'react'
import { Stage, Layer, Image as ImageKonva } from 'react-konva'
const Canvas = ({ children, width, height, onClick }) => {
const image = new Image()
// this hash is the image of a grid
image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIElEQVQoU2NkIAK8e/fuPyMR6hhGFeINJXDwgAhiwhIAOZAl5YYZd5AAAAAASUVORK5CYII='
return (
<Stage width={width} height={height}>
<Layer>
<ImageKonva
preventDefault={false}
width={width / 2}
height={width / 2}
fillPatternImage={image}
onClick={onClick}
/>
{children}
</Layer>
</Stage>
)
}
I've created this codesandbox where you can see the issue: https://codesandbox.io/s/angry-river-kszh0?file=/src/App.js
Note: It's not always reproducible, (can't figure out what's the pattern).
Sometimes it wouldn't happen, and I need to open chrome's console and refresh the page to make it happen.
You'll see the black box, and it will only show the grid after you click the button. The button only adds a child element.. from there, the image would always show. This problem only happens during the first load.
I believe I've figured it out, it seems I didn't consider that the image could be added asynchronously... so when I load the canvas, the image is not there yet.
So the solution is to only load ImageKanvas once the image is loaded using by setting an onload method to the image object
const Canvas = ({ children, width, height, onClick }) => {
const [loadGrid, setLoadGrid] = useState(false);
const image = new Image();
// this hash is the image of a grid
image.src =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIElEQVQoU2NkIAK8e/fuPyMR6hhGFeINJXDwgAhiwhIAOZAl5YYZd5AAAAAASUVORK5CYII=";
image.onload = () => {
setLoadGrid(true);
};
return (
<Stage width={width} height={height}>
<Layer>
{loadGrid && (
<ImageKonva
preventDefault={false}
width={width / 2}
height={width / 2}
fillPatternImage={image}
onClick={onClick}
/>
)}
{children}
</Layer>
</Stage>
);
};
https://codesandbox.io/s/wild-wind-br2qo?file=/src/App.js
I have a problem with FlyoutNavigation menu. I have code like this:
_navigation.NavigationRoot = new RootElement("Navigation")
{
new Section(new UIView(){BackgroundColor = UIColor.FromRGBA(0,0,0,0)}, new UIView(){BackgroundColor = UIColor.FromRGBA(0,0,0,0)})
{
new StyledStringElement ("Home")
{
BackgroundColor = UIColor.FromRGBA(255, 233, 203, 255),
TextColor = UIColor.Black,
Font = UIFont.FromName("Georgia", 16f),
Image = UIImage.FromBundle("Icons/ic_home")
}
... another StyledStringElemets
}
But my problem is UIImage in my menu has rly bad quality I can see pixels on real device (I tried it on my iPhone SE) prob on simulator iPhone SE is not so bad but on real device it is. I have all menu icons as 25x25 px png.
Is some good solution how UIImage in this navigation make in good quality?
I want add a left image in navigationbar,but it's color become blue
my code like this:
return <NavigatorIOS
initialRoute = {{
component:HomeScreen,
title:'test',
leftButtonIcon:require('../img/home_setting_icon.png'),
translucent:false
}}
/>
My image like this:
but the effect likes below:
In iOS it depends on the bar tint color, set that to the desired one (e.g. purple)
navigationController?.navigationBar.tintColor = .green
For original image color:
someBarButtonItem.image = UIImage(named:"myImage")?.withRenderingMode(.alwaysOriginal)
So I am looking to customize the TabBarIOS ui a little bit. Right now the TabBar has an icon field and a name field:
iconName="ios-pin"
title="Map"
Using these results in something like this (with the icon above the text):
However I am trying to get something that looks a like this (with the icon next to the text p.s sorry for the crappy image)
Does anyone have any idea how to do this? Below is my current TabBarIOS code.
Thanks!
renderScene(route, navigator) {
return (
<TabBarIOS
translucent={false}
unselectedTintColor="white"
tintColor="#f9c827"
barTintColor="#2c2c2c">
<Icon2.TabBarItemIOS
iconName="ios-pin"
title="Map"
selectedIconName="ios-pin"
selected={this.state.selectedTab === 'MapTab'}
onPress={() => {
this.setState({
selectedTab: 'MapTab',
});
}}>
{this.renderMap(route, navigator)}
</Icon2.TabBarItemIOS>
<Icon2.TabBarItemIOS
iconName="ios-list-box-outline"
title="List"
selectedIconName="ios-list-box-outline"
selected={this.state.selectedTab === 'ScrollTab'}
onPress={() => {
this.setState({
selectedTab: 'ScrollTab',
toolbar: YELLOW,
navigationBar: NavigationBarYellow,
});
}}>
{this.renderScrollView(route, 'ScrollTab')}
</Icon2.TabBarItemIOS>
</TabBarIOS>
);
}
The simplest way is to use images with text, the other one is to create container viewcontroller and use UIView instead of UITabbar.
That view should have two buttons with icons and texts that you need.
I have a retina image of 500x500 pixels but it has to be displayed as 250x250 on map.
If i scale the image the quality is reduced.
Is there a way we can display retina images on the openlayers 3 map.
I use this style to display images
var style = new ol.style.Style({
image: new ol.style.Icon(({
src: imagesource,
})),
});