如何在react-native中显示透明图像？

Question

我有一个透明图像，我试图使用react-native的Image组件显示，但图像显示为白色背景。< / p>

以下是我的代码：

export default class DefaultCard extends Component {
  constructor(props){
    super(props);
    console.log(props);
    console.log(this.props.card.logo)
  }

  render() {
    return (
      <View style={styles.container}>
      <FlipCard style={styles.card}
          flipHorizontal={true}
          flipVertical={false}
          flip={false}
          friction={40}
          perspective={1000}
      >
          <View style={styles.face}>
            <Image source={{uri : this.props.card.logo}} style={styles.logo}/> // this.props.card.logo is a transparent Image
            <Text style={styles.companyName}>{this.props.card.companyName.toUpperCase()}</Text>
            <Text style={styles.tagLine}>{this.props.card.tagLine}</Text>
            <View style={styles.fdBottom}></View>
          </View>

          <View style={styles.back}>
            <View style={styles.bdTop}>
              <Text style={styles.fullName}>{this.props.card.fullName.toUpperCase()}</Text>
              <Text style={styles.tagLine}>{this.props.card.position}</Text>
            </View>
            <View style={styles.detailsContainer}>
                <Text style={styles.details}>{this.props.card.phoneNumber}</Text>
                <Text style={styles.details}>{this.props.card.email}</Text>
                <Text style={styles.details}>{this.props.card.website}</Text>
            </View>

          </View>
      </FlipCard>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 20,
  },
  card: {
    maxHeight:200,
    maxWidth:300,
    borderColor: '#00000000',
    alignSelf: 'center',
  },
  face: {
    height:200,
    width:300,
    borderColor: '#00000000',
    backgroundColor: '#212121',
  },
  back: {
    height:200,
    width:300,
    backgroundColor: '#4CD4E4',
  },
  fdBottom: {
    height:36,
    backgroundColor: '#4CD4E4',
    borderColor: '#00000000',
    marginTop: 25,
  },
  companyName:{
    color: '#ffffff',
    fontSize: 22,
    marginTop: 15,
    alignSelf:'center',
    letterSpacing: 5
 },
  bdTop: {
    height: 80,
    backgroundColor: '#212121',
  },
  logo: {
      marginTop:30,
      height: 50,
      width: 50,
      alignSelf: 'center',
      backgroundColor: 'transparent'
  },
  tagLine: {
    marginTop: 5,
    alignSelf:'center',
    color: '#4CD4E4',
    fontSize: 10,
    letterSpacing: 2,
    fontWeight: 'bold'
  },
  fullName: {
    color: '#ffffff',
    fontSize: 18,
    marginTop: 20,
    alignSelf:'center',
    letterSpacing: 5
  },
  details: {
    color: '#ffffff',
    fontSize: 10,
    alignSelf: 'center',
    letterSpacing: 2,
    marginTop: 3,
    fontWeight: 'bold'
  },
  detailsContainer: {
    marginTop: 30,
  }
});

有人可以告诉我，我做错了吗？

Answer 1

  

您的安全图像来源与Apple有问题。

如果您使用的是HTTP连接，而不是https，请不要忘记添加此连接 App Transport Security Settings as dictionary and into it允许任意加载为布尔值，值为YES，如下图所示。

  

的Info.plist

 private void test(){
        try {
            JSONArray jsonArray = new JSONArray(getXstring());
            JSONObject jsonPost = jsonArray.getJSONObject(0);
            Log.e("TAG", jsonPost.getString("link"));

        }catch (Exception e){
            IFSLog.e("TAG", e.getMessage());
        }
    }

    private String getXstring(){
        return "[{\"id\":1,\"date\":\"2017-05-23T06:25:50\",\"date_gmt\":\"2017-05-23T06:25:50\",\"guid\":{\"rendered\":\"http:\\/\\/demo.wp-api.org\\/?p=1\"},\"modified\":\"2017-05-23T06:25:50\",\"modified_gmt\":\"2017-05-23T06:25:50\",\"slug\":\"hello-world\",\"status\":\"publish\",\"type\":\"post\",\"link\":\"https:\\/\\/demo.wp-api.org\\/2017\\/05\\/23\\/hello-world\\/\",\"title\":{\"rendered\":\"Hello world!\"},\"content\":{\"rendered\":\"<p>Welcome to <a href=\\\"http:\\/\\/wp-api.org\\/\\\">WP API Demo Sites<\\/a>. This is your first post. Edit or delete it, then start blogging!<\\/p>\\n\",\"protected\":false},\"excerpt\":{\"rendered\":\"<p>Welcome to WP API Demo Sites. This is your first post. Edit or delete it, then start blogging!<\\/p>\\n\",\"protected\":false},\"author\":1,\"featured_media\":0,\"comment_status\":\"open\",\"ping_status\":\"open\",\"sticky\":false,\"template\":\"\",\"format\":\"standard\",\"meta\":[],\"categories\":[1],\"tags\":[],\"_links\":{\"self\":[{\"href\":\"https:\\/\\/demo.wp-api.org\\/wp-json\\/wp\\/v2\\/posts\\/1\"}],\"collection\":[{\"href\":\"https:\\/\\/demo.wp-api.org\\/wp-json\\/wp\\/v2\\/posts\"}],\"about\":[{\"href\":\"https:\\/\\/demo.wp-api.org\\/wp-json\\/wp\\/v2\\/types\\/post\"}],\"author\":[{\"embeddable\":true,\"href\":\"https:\\/\\/demo.wp-api.org\\/wp-json\\/wp\\/v2\\/users\\/1\"}],\"replies\":[{\"embeddable\":true,\"href\":\"https:\\/\\/demo.wp-api.org\\/wp-json\\/wp\\/v2\\/comments?post=1\"}],\"version-history\":[{\"href\":\"https:\\/\\/demo.wp-api.org\\/wp-json\\/wp\\/v2\\/posts\\/1\\/revisions\"}],\"wp:attachment\":[{\"href\":\"https:\\/\\/demo.wp-api.org\\/wp-json\\/wp\\/v2\\/media?parent=1\"}],\"wp:term\":[{\"taxonomy\":\"category\",\"embeddable\":true,\"href\":\"https:\\/\\/demo.wp-api.org\\/wp-json\\/wp\\/v2\\/categories?post=1\"},{\"taxonomy\":\"post_tag\",\"embeddable\":true,\"href\":\"https:\\/\\/demo.wp-api.org\\/wp-json\\/wp\\/v2\\/tags?post=1\"}],\"curies\":[{\"name\":\"wp\",\"href\":\"https:\\/\\/api.w.org\\/{rel}\",\"templated\":true}]}},{\"id\":35,\"date\":\"2017-05-22T18:36:23\",\"date_gmt\":\"2017-05-22T18:36:23\",\"guid\":{\"rendered\":\"https:\\/\\/demo.wp-api.org\\/2017\\/05\\/22\\/quia-corrupti-quaerat-et-mollitia\\/\"},\"modified\":\"2017-05-22T18:36:23\",\"modified_gmt\":\"2017-05-22T18:36:23\",\"slug\":\"quia-corrupti-quaerat-et-mollitia\",\"status\":\"publish\",\"type\":\"post\",\"link\":\"https:\\/\\/demo.wp-api.org\\/2017\\/05\\/22\\/quia-corrupti-quaerat-et-mollitia\\/\",\"title\":{\"rendered\":\"Quia corrupti quaerat et mollitia\"},\"content\":{\"rendered\":\"<p><img alt=\\\"Praesentium ut.\\\" src=\\\"http:\\/\\/placehold.it\\/329x263\\/\\\"><\\/p>\\n<hr>\\n<img alt=\\\"Cum atque.\\\" src=\\\"http:\\/\\/placehold.it\\/233x186\\/\\\"><\\/p>\\n<h1>Numquam harum velit modi nihil. Et eveniet fugit dolor et fugit. Velit eaque magnam quis nemo. Ipsum similique dolorum nihil sint<\\/h1>\\n<hr>\\n<blockquote><p>Cum quia quam aut. Debitis <a title=\\\"Sit similique illo.\\\" href=\\\"http:\\/\\/www.Hills.net\\/explicabo-id-eligendi-quis\\\">hic nobis facere. Exercitationem necessitatibus<\\/a> soluta et. Est eaque maiores earum facere culpa. Sed qui fugiat autem <a title=\\\"Ab laudantium qui et ut.\\\" href=\\\"http:\\/\\/Stroman.org\\/\\\">Vero consectetur possimus<\\/a> doloribus nihil laboriosam Omnis omnis numquam ipsam sed. rerum quibusdam dolorum ut ullam ea <a title=\\\"Sit labore ullam et vel quod.\\\" href=\\\"http:\\/\\/Rau.com\\/\\\">Aperiam sit dolorem sed<\\/a> Deleniti velit dolor. Nobis recusandae est cum animi pariatur omnis <a title=\\\"Illo corrupti porro voluptatem ab dolores.\\\" href=\\\"http:\\/\\/www.Muller.biz\\/placeat-laborum-impedit-repudiandae-quae-quod\\\">Voluptatem cumque<\\/a> aliquid et hic excepturi. Libero quam rerum dolores repudiandae architecto. Dolore <a title=\\\"Suscipit atque.\\\" href=\\\"http:\\/\\/Connelly.biz\\/iure-aspernatur-nihil-consequatur-nam-suscipit-commodi-inventore\\\">dolore molestiae dolore<\\/a> exercitationem quia. Animi <a title=\\\"Ad numquam enim est enim.\\\" href=\\\"https:\\/\\/www.Trantow.com\\/sint-numquam-aut-dicta-nulla\\\">et pariatur earum aut veniam. Dolores eius quo<\\/a> voluptatem rerum. Sunt eaque voluptates ea eligendi. Nobis quis numquam cupiditate <a title=\\\"Ullam deserunt.\\\" href=\\\"http:\\/\\/Hirthe.net\\/\\\">adipisci aut. Libero animi enim culpa sit exercitationem.<\\/a> quasi fugit facere commodi. velit repellat perferendis et asperiores est. Non enim autem et omnis. Et molestiae hic ab nemo et deserunt. Saepe iusto possimus aliquid <a title=\\\"Ratione asperiores.\\\" href=\\\"http:\\/\\/www.Quigley.com\\/sit-qui-optio-in-beatae\\\">neque. Delectus mollitia expedita et<\\/a> Aut voluptatem exercitationem et modi assumenda.<\\/p><\\/blockquote>\\n<h6>Praesentium officiis minus nulla assumenda. Atque ut tempora qui facere et voluptatem incidunt. Accusamus ex quo eligendi dolorum voluptate qui modi<\\/h6>\\n<blockquote><p>Praesentium natus pariatur possimus officia. expedita voluptas dolorem id Fugiat ratione dolores eius. Repellat incidunt ullam id et recusandae. enim molestiae aperiam ex in blanditiis. possimus quam cupiditate officia ad Ut non et consectetur ducimus. Sint eius nesciunt voluptatibus. Fugit nemo aut laboriosam <a title=\\\"Maiores tempora non.\\\" href=\\\"http:\\/\\/Murray.com\\/dignissimos-velit-eius-hic-similique-numquam-consequuntur\\\">ut.<\\/a><\\/p><\\/blockquote>\\n<p><!--more--><\\/p>\\n<h5>Facilis reiciendis occaecati doloribus quisquam tenetur<\\/h5>\\n<blockquote><p>Ducimus cupiditate nobis voluptates. Et neque maxime quia culpa itaque nisi. Corrupti sapiente nisi sed quisquam. Totam voluptatem optio officiis et est et. Nisi cupiditate accusamus deleniti cupiditate et nobis. Soluta velit unde sed ducimus tempora fuga quas unde. Dolore perspiciatis et ut nisi sequi iste. Perspiciatis ipsam illo et placeat repellat. Magnam nostrum dolorum qui in eligendi consequuntur et. Distinctio neque nemo eveniet et mollitia iure magnam voluptatem. Aut ab aliquid aut esse qui. Fugiat velit labore optio nihil dolorem. Assumenda cupiditate assumenda non libero et qui. Voluptas quod ea repellendus quia dolore. Dolorem et vel iste accusantium. Sed ut odit voluptatem. Incidunt commodi error sed voluptatem ut. Perferendis corrupti sed sapiente expedita. Velit dicta occaecati impedit sapiente eos. Est magni et pariatur laborum ullam quia est mollitia. Corrupti aut accusantium voluptas asperiores odio rerum. Consectetur culpa pariatur laborum consequatur repellat. Facere placeat quasi aut repudiandae laboriosam est veniam. Est nulla qui excepturi quaerat qui quidem eos. Ea vitae reprehenderit sit neque ea soluta est rerum. Sint nisi maiores cumque voluptatibus quibusdam eum. Qui voluptas amet deleniti illo sed. Voluptatem doloremque sint sint autem. Illum consequatur illum et consequatur vel. Nostrum qui incidunt veritatis molestiae. Consequuntur blanditiis ipsam nulla sint qui quia.<\\/p><\\/blockquote>\\n<blockquote><p>Saepe laborum aliquam aut Repellat excepturi nemo ipsa vitae minima ut. rem id non maiores rem dolorem. Accusantium pariatur <a title=\\\"Vel dolorem vero quibusdam.\\\" href=\\\"http:\\/\\/www.Ruecker.com\\/et-facilis-dolores-possimus-reprehenderit-est-rem.html\\\">repellendus qui<\\/a> quae. Laboriosam nihil nulla ut quia esse est. Ratione corporis animi dolorum in. Perspiciatis id vel omnis aut. Vel ut <a title=\\\"Cum aspernatur.\\\" href=\\\"http:\\/\\/www.Morissette.com\\/quidem-dolores-nobis-architecto-corporis-harum-molestiae.html\\\">aspernatur et perferendis<\\/a> qui. <a title=\\\"Eos illum minima.\\\" href=\\\"https:\\/\\/Doyle.com\\/qui-consequatur-iure-rerum-non-quod-ut.html\\\">error<\\/a> est nulla Suscipit autem est est temporibus voluptatibus veritatis. Magnam voluptates nihil eius et repudiandae. Voluptas velit quo. Repudiandae quod eum tempore dolorum itaque eos. Consequatur dolore nisi adipisci qui aliquam. Vitae temporibus eos laborum ea corporis voluptatem. <a title=\\\"Quidem eum ut id incidunt architecto a.\\\" href=\\\"http:\\/\\/www.Rempel.com\\/\\\">laboriosam amet<\\/a> ipsa. aut eligendi veritatis. Repudiandae quisquam sint.<\\/p><\\/blockquote>\\n<p><img alt=\\\"Odit totam dolorem et atque.\\\" src=\\\"http:\\/\\/placehold.it\\/503x402\\/\\\"><\\/p>\\n<p><a title=\\\"Optio mollitia.\\\" href=\\\"http:\\/\\/Hodkiewicz.org\\/consequatur-eos-sit-sunt-eos-nesciunt-est.html\\\">Cupiditate<\\/a> rerum veritatis <a title=\\\"Aut harum alias ex.\\\" href=\\\"http:\\/\\/Medhurst.org\\/mollitia-odio-inventore-est-consequatur-consequatur-ut-iusto.html\\\"><a title=\\\"Eum nihil.\\\" href=\\\"https:\\/\\/www.Mraz.org\\/autem-fuga-velit-quia-sed-voluptas-distinctio-accusamus-nesciunt\\\">Rerum reiciendis est doloremque deleniti ullam ipsum.<\\/a><\\/a> <a title=\\\"Excepturi adipisci eaque.\\\" href=\\\"http:\\/\\/Dach.com\\/\\\">sapiente eos soluta. Nisi odit fugit ipsum<\\/a> vero <a title=\\\"Et consectetur eligendi id omnis repellendus sit molestiae consequatur.\\\" href=\\\"http:\\/\\/Kunde.net\\/\\\">Quidem ea praesentium aut qui sunt. Debitis<\\/a> laudantium officia itaque. Ex architecto neque<\\/p>\\n<hr>\\n\",\"protected\":false},\"excerpt\":{\"rendered\":\"<p>Numquam harum velit modi nihil. Et eveniet fugit dolor et fugit. Velit eaque magnam quis nemo. Ipsum similique dolorum nihil sint Cum quia quam aut. Debitis hic nobis facere. Exercitationem necessitatibus soluta et. Est eaque maiores earum facere culpa. Sed qui fugiat autem Vero consectetur possimus doloribus nihil laboriosam Omnis omnis numquam ipsam sed. rerum &hellip; <\\/p>\\n<p class=\\\"link-more\\\"><a href=\\\"https:\\/\\/demo.wp-api.org\\/2017\\/05\\/22\\/quia-corrupti-quaerat-et-mollitia\\/\\\" class=\\\"more-link\\\">Continue reading<span class=\\\"screen-reader-text\\\"> &#8220;Quia corrupti quaerat et mollitia&#8221;<\\/span><\\/a><\\/p>\\n\",\"protected\":false},\"author\":1,\"featured_media\":34,\"comment_status\":\"open\",\"ping_status\":\"closed\",\"sticky\":false,\"template\":\"\",\"format\":\"standard\",\"meta\":[],\"categories\":[11],\"tags\":[3],\"_links\":{\"self\":[{\"href\":\"https:\\/\\/demo.wp-api.org\\/wp-json\\/wp\\/v2\\/posts\\/35\"}],\"collection\":[{\"href\":\"https:\\/\\/demo.wp-api.org\\/wp-json\\/wp\\/v2\\/posts\"}],\"about\":[{\"href\":\"https:\\/\\/demo.wp-api.org\\/wp-json\\/wp\\/v2\\/types\\/post\"}],\"author\":[{\"embeddable\":true,\"href\":\"https:\\/\\/demo.wp-api.org\\/wp-json\\/wp\\/v2\\/users\\/1\"}],\"replies\":[{\"embeddable\":true,\"href\":\"https:\\/\\/demo.wp-api.org\\/wp-json\\/wp\\/v2\\/comments?post=35\"}],\"version-history\":[{\"href\":\"https:\\/\\/demo.wp-api.org\\/wp-json\\/wp\\/v2\\/posts\\/35\\/revisions\"}],\"wp:featuredmedia\":[{\"embeddable\":true,\"href\":\"https:\\/\\/demo.wp-api.org\\/wp-json\\/wp\\/v2\\/media\\/34\"}],\"wp:attachment\":[{\"href\":\"https:\\/\\/demo.wp-api.org\\/wp-json\\/wp\\/v2\\/media?parent=35\"}],\"wp:term\":[{\"taxonomy\":\"category\",\"embeddable\":true,\"href\":\"https:\\/\\/demo.wp-api.org\\/wp-json\\/wp\\/v2\\/categories?post=35\"},{\"taxonomy\":\"post_tag\",\"embeddable\":true,\"href\":\"https:\\/\\/demo.wp-api.org\\/wp-json\\/wp\\/v2\\/tags?post=35\"}],\"curies\":[{\"name\":\"wp\",\"href\":\"https:\\/\\/api.w.org\\/{rel}\",\"templated\":true}]}}]";
    }

  

或者你可以在XCode中编辑它