Expo反应本机应用程序图像在testflight ios上无法正常工作答案

【问题标题】：Expo react native app image not work properly on testflight iosExpo反应本机应用程序图像在testflight ios上无法正常工作
【发布时间】：2020-07-02 16:54:46
【问题描述】：

我有一个以屏幕为中心的应用登录页面。当我在 win 服务器上使用 expo 进行本地测试并在模拟器上测试 mac 时，它运行良好，但是当我执行 build-ios 并将其放入 appstore 并使用 testflight 进行测试时，它无法正常工作。

此代码也适用于 android。我做错了什么？

您可以使用 master 分支在 github 上查看完整代码：https://github.com/saricabasak/keyholder 我还分享了下面的相关代码，您可以快速查看

查看我在本地运行 expo：

在试飞中：

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 位于资产文件夹中。

【问题讨论】：

标签： android ios react-native expo testflight

【解决方案1】：

经过长时间的努力，我确实在下面针对ios进行了更改并解决了。

 <Image
          source={logo}
          style={container.logoStyle}
          resizeMode="center"
        />

到

 <Image
          source={logo}
          style={container.logoStyle}
          resizeMode="contain"
        />

【讨论】：