react-native - 无法添加本地图片

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。因为应该只有一个根组件。而且你应该关闭 Image 组件，因为没有组件的子组件。