React Native 中的“<Image> 组件不能包含子组件”，可能的修复？答案

【问题标题】："The <Image> component cannot contain children " in React Native, Possible fix ?React Native 中的“<Image> 组件不能包含子组件”，可能的修复？
【发布时间】：2018-02-05 09:24:30
【问题描述】：

第 1 天 React-Native 。尝试在 React-Native 应用程序中加载多个图像。但是，应用程序因错误而崩溃：

错误：组件不能包含子组件。如果你想在图像顶部呈现内容，请考虑使用 <ImageBackground> 组件或绝对定位。

我尝试解决这些现有问题，但未能解决我的问题：

还尝试将<ImageBackground> 替换为<Image>，但这也没有解决问题。

这是我的App.js 的代码：

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Image
} from 'react-native';

const playIcon = require('./images/play.png');
const volumeIcon = require('./images/sound.png');
const hdIcon = require('./images/hd-sign.png');
const fullScreenIcon = require('./images/full-screen.png');
const remoteImage = { uri:'https://s3.amazonaws.com/crysfel/public/book/new-york.jpg' };

export default class App extends Component<{}> {
  render() {
    return (
      <Image source={remoteImage} style={styles.fullscreen}>
      <View style={styles.container}>
        <Image source={playIcon} style={styles.icon} />
        <Image source={volumeIcon} style={styles.icon} />
        <View style={styles.progress}>
          <View style={styles.progressBar} />
        </View>
        <Image source={hdIcon} style={styles.icon} />
        <Image source={fullScreenIcon} style={styles.icon} />
      </View>
    </Image>
    );
  }
}

const styles = StyleSheet.create({
  fullscreen: {
    flex: 1,
  },
  container: {
    position: 'absolute',
    backgroundColor: '#202020',
    borderRadius: 5,
    flexDirection: 'row',
    height: 50,
    padding: 5,
    paddingTop: 16,
    bottom: 30,
    right: 10,
    left: 10,
    borderWidth: 1,
    borderColor: '#303030',
  },
  icon: {
    tintColor: '#fff',
    height: 16,
    width: 16,
    marginLeft: 5,
    marginRight: 5,
  },
  progress: {
    backgroundColor: '#000',
    borderRadius: 7,
    flex: 1,
    height: 14,
    margin: 10,
    marginTop: 2,
  },
  progressBar: {
    backgroundColor: '#bf161c',
    borderRadius: 5,
    height: 10,
    margin: 2,
    width: 80,
  },
});

什么可能导致此问题以及如何解决？

【问题讨论】：

标签： javascript android ios react-native

【解决方案1】：

不再支持带有嵌套内容的<Image>。请改用<ImageBackground>。

<View style={styles}>
  <ImageBackground style={styles} source={source} resizeMode={resizeMode} >
    {children}
  </ImageBackground>
  {...}
</View>

您还需要添加一个父组件 (View) 来包装您的所有组件。

【讨论】：

【解决方案2】：

这是行不通的，因为您必须用父视图包装所有组件。图片不能是父视图。

类似这样的：

render() {
  return (
    <View>
      <Image source={remoteImage} style={styles.fullscreen}>
        <View style={styles.container}>
          <Image source={playIcon} style={styles.icon} />
          <Image source={volumeIcon} style={styles.icon} />
          <View style={styles.progress}>
            <View style={styles.progressBar} />
          </View>
          <Image source={hdIcon} style={styles.icon} />
          <Image source={fullScreenIcon} style={styles.icon} />
        </View>
      </Image>
    </View>
  );
}

【讨论】：