无法添加本地图像

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语法错误：---------- / src / Components / Story1.js：相邻的JSX元素必须包装在一个封闭的标记中。您是否想要JSX片段<> ...？ （39：2）

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

Answer 1

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

示例：

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

您应该将“文本”和“图像”组件包装在一个类似“视图”的组件中。因为应该只有一个根组件。 而且您应该关闭Image组件，而不是 因为没有component的子代。