无法添加本地图片

Question

无法添加本地图片。

我试过：

const MyApp = () => {
    return(
        <Text>
            Some Text
        </Text>
        <Image source={require('./story1.jpg')} />
        )
}

也尝试过：

const MyApp = () => {
    return(
        <Text>
            Some Text
        </Text>
        <Image source={require('./story1.jpg')}> </Image>
        )
}

错误： 错误：TransformError SyntaxError: ------------/src/Components/Story1.js: 相邻的 JSX 元素必须包含在封闭标记中。你想要一个 JSX 片段 <>...？ (39:2)

为什么会出现此错误？我究竟做错了什么？该图像位于该组件所在的同一文件夹中。

Answer 1

您需要将 <Text> 和 <Image> 组件包装在父 <View> 或片段中。此外，您需要为图像添加宽度和高度。请参见下面的示例。

示例：

const MyApp = () => {
    return(
        <View>
           <Text>
            Some Text
           </Text>
           <Image source={require('./story1.jpg')} style={{width: 100, height: 100}}/>
        </View>
        );
}

Answer 2

const MyApp = () => {
    return(
        <View>
          <Text>
            Some Text
          </Text>
          <Image source={require('./story1.jpg')} />
        </View>
        )
}

您应该将 Text 和 Image 组件包装在一个组件中，例如 View。因为应该只有一个根组件。而且你也应该像不那样关闭图像组件因为没有子组件。

无法添加本地图片

Unable to add local image

react-native

react-native-image