Question

我试图在反应原生中使用Navigator在两个场景之间导航。下面是场景的代码和＃34;示例＆＃34;，＆＃34; LightboxView1＆＃34;。我在第二个场景＆＃34; LightboxView1＆＃34;中将一个图像放在Lightbox中。当我运行代码时，图像不显示。

此外，如果我尝试将图像放在第一个场景的灯箱中，我会收到此错误＆＃34; react.children.only预计会收到一个反应元素的孩子＆＃34;

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

我相信您没有在height中设置图片的width和styles.contain。 Image不会渲染，直到告知其大小。

对于react.children.only错误，请将Image和标头包装在一个View中，并将其直接放在Lightbox内。

编辑，因为iOS 9默认情况下无法通过HTTP加载资源。要覆盖此内容，您需要将App Transport Security Exception添加到Info.plist。

图像未显示在Lighbox React Native中

1 个答案: