logo标签列表

在React Native中实现图像和文本并排显示

javascriptimagereact-nativeview
4

我需要关于react-native图片并排显示的帮助。我无法以正确的方式完成它。 我想要这些图片并排显示，分为两列和2行。 以下是我的代码

<View style={{ flexDirection: "row" }}>
                <Text>Sample</Text>
                <TouchableOpacity
                  style={{ alignItems: "center" }}
                  onPress={() =>
                    Linking.openURL(
                      "#"
                    )
                  }
                >
                  <Image
                    source={transport}
                    style={{ width: 150, height: 120, padding: 50 }}
                  />
                </TouchableOpacity>
                <Text>Sample</Text>
                <TouchableOpacity
                  style={{ alignItems: "center" }}
                  onPress={() =>
                    Linking.openURL(
                      "#"
                    )
                  }
                >
                  <Image
                    source={entertainment}
                    style={{ width: 150, height: 120, padding: 50 }}
                  />
                </TouchableOpacity>
                <Text>Sample</Text>
                <TouchableOpacity
                  style={{ alignItems: "center" }}
                  onPress={() =>
                    Linking.openURL(
                      "#"
                    )
                  }
                >
                  <Image
                    source={doorkay}
                    style={{ width: 150, height: 120, padding: 50 }}
                  />
                </TouchableOpacity>
                <Text>Sample</Text>
                <TouchableOpacity
                  style={{ alignItems: "center" }}
                  onPress={() =>
                    Linking.openURL(
                      "#"
                    )
                  }
                >
                  <Image
                    source={blood}
                    style={{ width: 150, height: 120, padding: 50 }}
                  />
                </TouchableOpacity>
              </View>
enter image description here I am also attaching the result which i got. Please help. Thanks to everyone

你尝试过使用Flex布局吗？ - Asutosh
不太清楚如何在这段代码中实现。你能指导一下@asutosh吗？谢谢。 - Syed Bilal
我尝试过这个，但对我没有用 https://dev59.com/E5ffa4cB1Zd3GeqP1wjK - Syed Bilal
@sayed 在这里放一个 JSFiddle，以了解您在尝试使用 Flex 布局时遇到的问题。 - Asutosh
你能给我展示一下使用我的方法可以工作的flex布局的例子吗？我已经分享了我应用的内容@Asutosh和一个链接，但两种方法都失败了。我面临的问题是一个图像占据了整个宽度，而下一个图像在该图像下方。请查看https://imgur.com/a/57FCey6。 - Syed Bilal
1个回答
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接