图像未在 Lightbox React Native 中显示

Question

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

另外，如果我尝试将图像放在第一个场景的灯箱中，我会收到此错误“react.children.only 预期会收到单个反应元素子”

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 和标头包装在一个View 中，并将其单独放在Lightbox 中。

编辑： 从 iOS 9 开始，默认情况下您无法通过 HTTP 加载资源。要覆盖它，您需要将App Transport Security Exception 添加到您的Info.plist。