图像未在 Lightbox React Native 中显示

Question

我正在尝试在 react-native 中使用 Navigator 在两个场景之间导航。以下是场景 "Example"、"LightboxView1" 的代码。我在第二个场景 "LightboxView1" 的 Lightbox 中放了一张图片。当我运行代码时，图像不显示。

此外，如果我尝试将图像放入第一个场景的灯箱中，则会出现此错误 "react.children.only expected to receive a single react element child"

var Example = React.createClass({

  navigate(id) {
    this.props.navigator.push({
        id: id,
        component: LightboxView1
    })
  },


  render: function() {

    return (
      <ScrollView style={styles.container}>
        <View style={styles.text}><Text>Test Text 1</Text></View>
        <Lightbox navigator={this.props.navigator}
          renderHeader={close => (
            <TouchableOpacity onPress={close}>
              <Text style={styles.closeButton}>Close</Text>
            </TouchableOpacity>
          )}>
          <View style={styles.customHeaderBox}><Text>I have a custom header</Text></View>
        </Lightbox>
       <TouchableHighlight onPress={ () => this.navigate('second') } style={ styles.button }>
         <Text>Second View</Text>
       </TouchableHighlight>
      </ScrollView>
    );
  },
});

var LightboxView1 = React.createClass({

  render: function() {
    return (
      <ScrollView style={styles.container}>
        <View style={styles.text}>
          <Text>Lighbox view 1: some example text</Text>
        </View>
        <Lightbox underlayColor="white" navigator={this.props.navigator}>
          <Image style={styles.contain} resizeMode="contain"
            source={{uri: 'http://www.yayomg.com/wp-content/uploads/2014/04/yayomg-pig-wearing-party-hat.jpg'}}
          />
         </Lightbox>
        <TouchableHighlight onPress={ () => this.props.navigator.pop()}>
            <Text>First View</Text>
        </TouchableHighlight>
      </ScrollView>
    );
  },
});

var LightBoxProject = React.createClass({

  _renderScene: function(route, navigator){
  if(route.component) {
    var Component = route.component;
    return (<Component navigator={navigator} route={route} {...route.passProps} />);
  }
   switch(route.id){
    case "first":
      return(<Exmaple navigator={navigator} />);
    case "second":
      return (<LightboxView1 navigator={navigator}/>);
  }
},

  render: function() {

    return (
      <Navigator
        ref="navigator"
        style={styles.navigator}
        renderScene={this._renderScene}
        initialRoute={{ id: 'first', component: Example}}
      />
    );
  }
});

Answer 1

我相信您没有在 styles.contain 中设置图像的 height 和 width。 Image 在被告知其大小之前不会呈现。

至于 react.children.only 错误，将 Image 和 header 包装在一个 View 中，然后将其单独直接放在 Lightbox.

edit: since iOS 9 默认情况下，您无法通过 HTTP 加载资源。要覆盖它，您需要将 App Transport Security Exception 添加到 Info.plist.

图像未在 Lightbox React Native 中显示

Image is not displaying inside Lighbox React Native

lightbox

navigator

react-native