“這<Image>組件在 React Native 中不能包含子項，可能的解決方法是什么？

Question

使用React-Native 。 嘗試在React-Native應用程序中加載多個圖像。 但是，應用程序崩潰並顯示以下錯誤：

錯誤：組件不能包含子組件。 如果要在圖像頂部呈現內容，請考慮使用<ImageBackground>組件或絕對定位。

我嘗試解決這些現有問題，但他們未能解決我的問題：

• 如何使用 ImageBackground 在 react-native 中為屏幕設置背景圖像。
• 最新 react 0.50.0 #709 的平鋪組件問題

還嘗試用<ImageBackground> <Image>替換<ImageBackground> ，但這也沒有解決問題。

這是我的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,
  },
});

可能導致此問題的原因是什么以及如何解決？

Answer 1

不再支持帶有嵌套內容的<Image> 。 請改用<ImageBackground> 。

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

您還需要添加一個父組件 ( View ) 來包裝所有組件。

Answer 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>
  );
}