100% ширина в React Native Flexbox

203

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

Как я могу сделать красную коробку до 100% ширины?

введите описание изображения здесь

Код:

  <View style={styles.container}>
    <Text style={styles.welcome}>
      Welcome to React Natives
    </Text>
    <Text style={styles.line1}>
      line1
    </Text>
    <Text style={styles.instructions}>
      Press Cmd+R to reload,{'\n'}
      Cmd+D or shake for dev menu
    </Text>
  </View>

стиль:

container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#F5FCFF',
  borderWidth: 1,
  flexDirection: 'column',
},
welcome: {
  fontSize: 20,
  textAlign: 'center',
  margin: 10,
  borderWidth: 1,
},
line1: {
    backgroundColor: '#FDD7E4',
},
instructions: {
  textAlign: 'center',
  color: '#333333',
  marginBottom: 5,
  borderWidth: 1,
},

Спасибо!

Обновление 1: предложение Нишанта Шанкара, добавив flex: 1 для оболочки, flexDirection: 'row'

Вывод:

введите описание изображения здесь

Код:

  <View style={styles.container}>
    <View style={{flex:1}}>
      <Text style={styles.welcome}>
        Welcome to React Natives
      </Text>
    </View>
    <View style={{flex:1}}>
      <Text style={styles.line1}>
        line1
      </Text>
    </View>
    <View style={{flex:1}}>
      <Text style={styles.instructions}>
        Press Cmd+R to reload,{'\n'}
        Cmd+D or shake for dev menu
      </Text>
    </View>
  </View>

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    borderWidth: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    borderWidth: 1,
  },
  line1: {
      backgroundColor: '#FDD7E4',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
    borderWidth: 1,
  },
franfran
источник

Ответы:

414

Просто добавьте alignSelf: "stretch"в таблицу стилей вашего элемента.

line1: {
    backgroundColor: '#FDD7E4',
    alignSelf: 'stretch',
    textAlign: 'center',
},
Корентин С.
источник
9
Ссылка не работает.
Лукас Кнут
2
При использовании alignSelf stretch у меня возникла проблема с Android - у меня было изображение с «абсолютной» позицией, и в этом случае, даже при использовании «stretch», такая вставка добавлялась к краю элементов, содержащихся внутри. Dimensions.get ('window'). Width работал как на iOS, так и на Android в моем случае.
st_bk
Это один из способов решить все мои проблемы с «полной шириной», проверьте это: snack.expo.io/S1PWQqkcZ
webdevinci
1
Кажется, width: "100%"должно работать, но это не так. Я думаю, что я не понимаю, когда alignSelf: "stretch"работает против width: "100%". @Corentin есть идеи? Спасибо!
Джоэл
4
@st_bk был спасателем там! Тем не менее, я нашел лучшее решение для события, которое вы абсолютно позиционируете и вам нужно растянуть:position: absolute, top: 0, bottom: 0, left: 0, right: 0
lance.dolan
119

Вы должны использовать Размеры

Сначала определите Размеры.

import { Dimensions } from "react-native";

var width = Dimensions.get('window').width; //full width
var height = Dimensions.get('window').height; //full height

затем измените line1стиль, как показано ниже:

line1: {
    backgroundColor: '#FDD7E4',
    width: width,
},
Мелих Мукук
источник
3
спасибо Мелих Мукук! alignSelf: «растяжка», предложенная Корентином С., является самой простой и простой, поэтому я принял этот ответ. Тем не менее, наличие размеров приводит меня к новому способу игры вокруг макета. В некоторых случаях мы можем настроить элементы программно, спасибо!
Франфран
1
@Melih Я обнаружил, что на моем устройстве Android неверная ширина. Правильная ширина должна быть 720px, но возвращается 360px.
Peacepassion
4
@peacepassion, у вас есть 360, потому что dpi вашего устройства масштабируется в 2 раза. Попробуйте Dimensions.get('window').scale- это должно вернуть 2 в вашем случае.
Иерусалим
Спасибо за ваш ответ, я имею дело с контейнером с фоном, и ваше предложение идеально подходит.
Clarenswd
7
Это не будет работать, когда устройство поворачивается. Лучше использовать адаптивный макет.
лайнемоселей
26

Editted:

Чтобы согнуть только центральный текст, можно использовать другой подход - разделить другие виды.

  • Пусть flexDirection останется в столбце
  • вынуть alignItems : 'center'из контейнера
  • добавить alignSelf:'center'к текстовым представлениям, которые вы не хотите сгибать

Вы можете обернуть компонент Text в компоненте View и дать представлению Flex 1.

Сгиб даст:

Ширина 100%, если flexDirection:'row'в style.container

Высота 100%, если flexDirection:'column'в style.container

Нишант Шанкар
источник
да, я попытался установить flexDirection: 'row' и flex: 1, чтобы ширина достигла 100%. Однако все компоненты встроены и не могут перейти к следующей строке. даже я использовал flexWrap: 'wrap'
franfran
удачи с новым методом франфран?
Нишант Шанкар
Работа alignSelf: 'stretch', предложенная Corentin S. работает.
Франфран
8

Ну вот:

Просто измените стиль line1, как показано ниже:

line1: {
    backgroundColor: '#FDD7E4',
    width:'100%',
    alignSelf:'center'
}
iDevAmit
источник
6

Используйте JavaScript, чтобы получить ширину и высоту и добавить их в стиле View. Чтобы получить полную ширину и высоту, используйте Dimensions.get('window').width https://facebook.github.io/react-native/docs/dimensions.html

getSize() {
    return {
        width: Dimensions.get('window').width, 
        height: Dimensions.get('window').height
    }
}

а потом,

<View style={[styles.overlay, this.getSize()]}>
Шон Чен
источник
Ох, мне это нравится. Возможно, не лучшее решение, но оно решило мою проблему. Не говоря уже о том, что это довольно аккуратная функция в целом.
Кевин Эстеркильде
5

Сначала добавьте размерный компонент:

import { AppRegistry, Text, View,Dimensions } from 'react-native';

Второе определение переменных:

var height = Dimensions.get('window').height;
var width = Dimensions.get('window').width;

В-третьих, поместите это в таблицу стилей:

textOutputView: {
    flexDirection:'row',
    paddingTop:20,
    borderWidth:1,
    borderColor:'red',
    height:height*0.25,
    backgroundColor:'darkgrey',
    justifyContent:'flex-end'
}

На самом деле в этом примере я хотел сделать отзывчивый вид и хотел видеть только 0,25 вида экрана, поэтому я умножил его на 0,25, если вы хотите, чтобы 100% экрана не умножали его на что-то вроде этого:

textOutputView: {
    flexDirection:'row',
    paddingTop:20,
    borderWidth:1,
    borderColor:'red',
    height:height,
    backgroundColor:'darkgrey',
    justifyContent:'flex-end'
}
Абоалела Мохаммед
источник
2

Отмечено: попытаться полностью понять концепцию flex.

       <View style={{
          flex: 2,
          justifyContent: 'center',
          alignItems: 'center'
        }}>
          <View style ={{
              flex: 1,
              alignItems: 'center, 
              height: 50, 
              borderWidth: 1, 
              borderColor: '#000' 
          }}>
               <Text>Welcome to React Nativ</Text>
           </View>
           <View style={{
              flex: 1,
              alignItems: 'center,
              borderWidth: 1, 
              borderColor: 'red ', 
              height: 50
            }}
            >
              <Text> line 1 </Text>
            </View>
          <View style={{
            flex: 1,
            alignItems: 'center, 
            height: 50, 
            borderWidth: 1,                     
            borderColor: '#000'
          }}>
             <Text>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
             </Text>
           </View>
       </View>
Даниэль Агус Сидабутар
источник
1

просто удалите alignItems: 'center'в контейнере стили и добавьте textAlign: "center"вline1 стилю , как приведено ниже.

Это будет хорошо работать

container: {
  flex: 1,
  justifyContent: 'center',
  backgroundColor: '#F5FCFF',
  borderWidth: 1,
}

line1: {
    backgroundColor: '#FDD7E4',
    textAlign:'center'
},
Рави
источник
1
Style ={{width : "100%"}}

попробуй это:

StyleSheet generated: {
  "width": "80%",
  "textAlign": "center",
  "marginTop": 21.8625,
  "fontWeight": "bold",
  "fontSize": 16,
  "color": "rgb(24, 24, 24)",
  "fontFamily": "Trajan Pro",
  "textShadowColor": "rgba(255, 255, 255, 0.2)",
  "textShadowOffset": {
    "width": 0,
    "height": 0.5
  }
}
Чаурасия
источник
Пожалуйста, предоставьте правильный ответ на вопрос. Не предоставляйте ссылку, предварительно не объяснив, о чем она.
Akaisteph7
-1

width: '100%'и alignSelf: 'stretch'не работал на меня. Dimensionsне подходил для моей задачи, потому что мне нужно было работать с глубоко вложенным представлением. Вот что сработало для меня, если я переписал твой код. Я просто добавил еще несколько Views и использовал flexсвойства для достижения нужного макета:

  {/* a column */}
  <View style={styles.container}>
    {/* some rows here */}
    <Text style={styles.welcome}>
      Welcome to React Natives
    </Text>
    {/* this row should take all available width */}
    <View style={{ flexDirection: 'row' }}>
      {/* flex 1 makes the view take all available width */}
      <View style={{ flex: 1 }}>
        <Text style={styles.line1}>
          line1
        </Text>
      </View>
      {/* I also had a button here, to the right of the text */}
    </View>
    {/* the rest of the rows */}
    <Text style={styles.instructions}>
      Press Cmd+R to reload,{'\n'}
      Cmd+D or shake for dev menu
    </Text>
  </View>
Саша Давиденко
источник