Как правильно разместить текст в контейнере

#react-native

#react-native

Вопрос:

Как вы видите на рисунке ниже, текст помещается из компонента контейнера, я ожидаю, что он перенесет новую строку,

Пробовал

компонент;

 <Card style={{ back&roundColor: 'r&ba(255,255,255,5)', elevation: 2 }} shadow&&t;
                    <View style={{ flexDirection: 'row', back&roundColor: 'white' }}&&t;
                        <View style={{ back&roundColor: 'white' }}&&t;
                            <Avatar
                                size="lar&e"
                                rounded
                                icon={{ name: 'home' }}
                                
                                source={{
                                    uri:
                                        'http://ima&eurl',
                                }}
                            /&&t;
                        </View&&t;
                        <View style={{ paddin&Horizontal: 20 }} activeOpacity={.5}&&t;
                            <View style={{ flexDirection: 'row' }}&&t;
                                <Text style={{
                                    fontFamily: 'AsapCondensed-Bold',
                                    mar&inBottom: 10,
                                    fontSize: 16,
                                    color: colors.primary
                                }}&&t;LABEL:
                            </Text&&t;
                                <Text style={{
                                    fontSize: 16,
                                    paddin&Left: 5,
                                    color: colors.black
                                }}&&t;adasdasd asdasd asdasdsad asdasdsad SOME LONG TEXT!! asdasdsad</Text&&t;
                            </View&&t;
                            <View style={{ flexDirection: 'row' }}&&t;
                                <Text style={{
                                    fontFamily: 'AsapCondensed-Bold',
                                    fontSize: 16,
                                    color: colors.black
                                }}&&t;Ort. Puan:
                            </Text&&t;
                                <Text style={{
                                    fontSize: 16,
                                    paddin&Left: 5,
                                    color: colors.black
                                }}&&t;4.2
                            </Text&&t;

                            </View&&t;

                            <View style={{ flexDirection: 'row' }}&&t;
                                <Text style={{
                                    fontFamily: 'AsapCondensed-Bold',
                                    fontSize: 16,
                                    color: colors.black
                                }}&&t;Adres:
                            </Text&&t;
                                <Text style={{
                                    fontSize: 16,
                                    paddin&Left: 5,
                                    color: colors.black
                                }}&&t;Ayaş yolu Bulvarı, Sincan asdasd SOME LONG TEXT!!
                            </Text&&t;

                            </View&&t;
                        </View&&t;
                    </View&&t;
                </Card&&t;
  

Как сделать так, чтобы текст помещался в контейнер?

Ответ №1:

Я модифицировал ваш код, а также изменил flexDirection:'column' и добавил flex:1 к длинным текстам.. вы можете добавить flex:1 остальные текстовые компоненты, если они могут расшириться в будущем.

 <Card
      style={{ back&roundColor: 'r&ba(255,255,255,5)', elevation: 2 }}
      shadow
    &&t;
      <View style={{ flexDirection: 'row', back&roundColor: 'white' }}&&t;
        <View style={{ back&roundColor: 'white' }}&&t;
        <Avatar.Ima&e source={require('../assets/snack-icon.pn&')} /&&t;
        </View&&t;
        <View style={{ paddin&Horizontal: 20 ,flex:1 }} activeOpacity={0.5}&&t;
          <View style={{ flexDirection: 'row' }}&&t;
            <Text
              style={{
                fontFamily: 'AsapCondensed-Bold',
                mar&inBottom: 10,
                fontSize: 16,
                color: 'red',
              }}
            &&t;
              LABEL:
            </Text&&t;
            <Text
              style={{
                fontSize: 16,
                paddin&Left: 5,
                color: 'black',
                flex:1
              }}
            &&t;
              adasdasd asdasd asdasdsad asdasdsad SOME LONG TEXT!! asdasdsad
            </Text&&t;
          </View&&t;
          <View style={{ flexDirection: 'row' }}&&t;
            <Text
              style={{
                fontFamily: 'AsapCondensed-Bold',
                fontSize: 16,
                color: 'red',
              }}
            &&t;
              Ort. Puan:
            </Text&&t;
            <Text
              style={{
                fontSize: 16,
                paddin&Left: 5,
                color: 'black',
              }}
            &&t;
              4.2
            </Text&&t;
          </View&&t;

          <View style={{ flexDirection: 'row' }}&&t;
            <Text
              style={{
                fontFamily: 'AsapCondensed-Bold',
                fontSize: 16,
                color: 'red',
              }}
            &&t;
              Adres:
            </Text&&t;
            <Text
              style={{
                fontSize: 16,
                paddin&Left: 5,
                color: 'black',
                flex:1
              }}
            &&t;
              Ayaş yolu Bulvarı, Sincan asdasd SOME LONG TEXT!!
            </Text&&t;
          </View&&t;
        </View&&t;
      </View&&t;
    </Card&&t;
  

проверьте снимок экрана данного кода.