Отображение изображения и текста бок о бок в React Native - PullRequest
Новая
       71

Отображение изображения и текста бок о бок в React Native

1 голос
/ 01 августа 2020

Мне нужна помощь относительно изображений, поддерживающих реакцию, рядом. Я не могу сделать это правильно. Я хочу, чтобы эти изображения отображались рядом в двух столбцах и двух строках. Вот мой код 

<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>
введите здесь описание изображения Я также прилагаю полученный результат. Пожалуйста помоги. Всем спасибо

1 Ответ

0 голосов
/ 02 августа 2020

Привет, вы можете взглянуть на закуски, которые я создал здесь: https://snack.expo.io/@shawwals / image-side-by-side

Надеюсь, это поможет вам.

...