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

Ответ 1

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

line1: {
    backgroundColor: '#FDD7E4',
    alignSelf: 'stretch',
    textAlign: 'center',
},

Ответ 2

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

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

import { Dimensions } from "react-native";

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

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

line1: {
    backgroundColor: '#FDD7E4',
    width: width,
},

Ответ 3

Editted:

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

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

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

Flex даст:

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

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

Ответ 4

Используйте JavaScript, чтобы получить ширину и высоту и добавить их в стиле просмотра. Чтобы получить полную ширину и высоту, используйте 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

Ну вот:

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

line1: {
         backgroundColor: '#FDD7E4',
         width:'100%',
         alignSelf:'center'
       }

Ответ 6

Сначала добавьте компонент Dimension:

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

Ответ 7

Отмечено: попытаться полностью понять концепцию 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>

Ответ 8

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

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

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

line1: {
    backgroundColor: '#FDD7E4',
    textAlign:'center'
},

Ответ 9

Style = {{width: "100%"}} Пожалуйста, попробуйте этот синтаксис. введите описание ссылки здесь