Expo React 本机应用程序图像无法在 testflight 上正常工作 ios
Expo react native app image not work properly on testflight ios
我有一个位于屏幕中央的应用程序登录页面。当我在 win 服务器上使用 expo 进行本地测试并在模拟器上测试 mac 时,它运行良好,但是当我执行 build-ios 并将其放入 appstore 并使用 testflight 进行测试时,它无法正常工作。
此代码也适用于 android。
我做错了什么?
您可以在 github 上使用 master 分支查看完整代码:https://github.com/saricabasak/keyholder
我也在下面分享相关代码,你可以快速查看
查看我 运行 在本地举办的博览会:
试飞:
app.json
{
"expo": {
"name": "key-holder",
"slug": "key-holder",
"privacy": "public",
"sdkVersion": "35.0.0",
"platforms": [
"ios",
"android",
"web"
],
"version": "1.1.0",
"orientation": "portrait",
"icon": "./assets/kilit_logo_logo_500x500.png",
"splash": {
"image": "./assets/kilit_logo_logo_1000x1000.png",
"resizeMode": "contain",
"backgroundColor": "#DAD7C5"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": false,
"bundleIdentifier": "com.coderals.keyholder",
"buildNumber": "1.0.0"
},
"android": {
"package": "com.coderals.keyholder",
"versionCode": 1
},
"androidStatusBar": {
"barStyle": "light-content",
"backgroundColor": "#334393"
},
"description": ""
}
}
图片代码:
import logo from '../../assets/transparentLogo.png';
export default class KeyHolderContainer extends Component {
render() {
let renderLogo;
let renderText;
if (this.props.isLogin) {
renderLogo = (
<Image
source={logo}
style={container.logoStyle}
resizeMode="center"
/>
);
renderText = (
<Text style={container.titleStyle}>
{translate("KeyHolderWelcome")}
</Text>
);
}
return (
<Container style={container.containerStyle}>
{renderLogo}
{renderText}
{this.props.children}
</Container>
);
}
}
样式:
export const container = StyleSheet.create({
containerStyle: {
width: "100%",
height: "100%",
backgroundColor: getStyle("container.backgroundColor")
},
logoStyle: {
width: "40%",
height: "40%",
alignSelf: "center"
},
titleStyle: {
color: getStyle("container.titleColor"),
fontSize:20,
fontWeight: "bold",
alignSelf: "center"
}
});
资产文件夹中的图片尺寸:500 x 500。
经过长时间的努力,我确实在下面做了ios的修改并解决了。
<Image
source={logo}
style={container.logoStyle}
resizeMode="center"
/>
至
<Image
source={logo}
style={container.logoStyle}
resizeMode="contain"
/>
我有一个位于屏幕中央的应用程序登录页面。当我在 win 服务器上使用 expo 进行本地测试并在模拟器上测试 mac 时,它运行良好,但是当我执行 build-ios 并将其放入 appstore 并使用 testflight 进行测试时,它无法正常工作。
此代码也适用于 android。 我做错了什么?
您可以在 github 上使用 master 分支查看完整代码:https://github.com/saricabasak/keyholder 我也在下面分享相关代码,你可以快速查看
查看我 运行 在本地举办的博览会:
试飞:
app.json
{
"expo": {
"name": "key-holder",
"slug": "key-holder",
"privacy": "public",
"sdkVersion": "35.0.0",
"platforms": [
"ios",
"android",
"web"
],
"version": "1.1.0",
"orientation": "portrait",
"icon": "./assets/kilit_logo_logo_500x500.png",
"splash": {
"image": "./assets/kilit_logo_logo_1000x1000.png",
"resizeMode": "contain",
"backgroundColor": "#DAD7C5"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": false,
"bundleIdentifier": "com.coderals.keyholder",
"buildNumber": "1.0.0"
},
"android": {
"package": "com.coderals.keyholder",
"versionCode": 1
},
"androidStatusBar": {
"barStyle": "light-content",
"backgroundColor": "#334393"
},
"description": ""
}
}
图片代码:
import logo from '../../assets/transparentLogo.png';
export default class KeyHolderContainer extends Component {
render() {
let renderLogo;
let renderText;
if (this.props.isLogin) {
renderLogo = (
<Image
source={logo}
style={container.logoStyle}
resizeMode="center"
/>
);
renderText = (
<Text style={container.titleStyle}>
{translate("KeyHolderWelcome")}
</Text>
);
}
return (
<Container style={container.containerStyle}>
{renderLogo}
{renderText}
{this.props.children}
</Container>
);
}
}
样式:
export const container = StyleSheet.create({
containerStyle: {
width: "100%",
height: "100%",
backgroundColor: getStyle("container.backgroundColor")
},
logoStyle: {
width: "40%",
height: "40%",
alignSelf: "center"
},
titleStyle: {
color: getStyle("container.titleColor"),
fontSize:20,
fontWeight: "bold",
alignSelf: "center"
}
});
资产文件夹中的图片尺寸:500 x 500。
经过长时间的努力,我确实在下面做了ios的修改并解决了。
<Image
source={logo}
style={container.logoStyle}
resizeMode="center"
/>
至
<Image
source={logo}
style={container.logoStyle}
resizeMode="contain"
/>