Я уже прочитал несколько учебных пособий по 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,
},
flexbox
react-native
franfran
источник
источник
width: "100%"
должно работать, но это не так. Я думаю, что я не понимаю, когдаalignSelf: "stretch"
работает противwidth: "100%"
. @Corentin есть идеи? Спасибо!position: absolute, top: 0, bottom: 0, left: 0, right: 0
Вы должны использовать Размеры
Сначала определите Размеры.
затем измените
line1
стиль, как показано ниже:источник
Dimensions.get('window').scale
- это должно вернуть 2 в вашем случае.Editted:
Чтобы согнуть только центральный текст, можно использовать другой подход - разделить другие виды.
alignItems : 'center'
из контейнераalignSelf:'center'
к текстовым представлениям, которые вы не хотите сгибатьВы можете обернуть компонент Text в компоненте View и дать представлению Flex 1.
Сгиб даст:
Ширина 100%, если
flexDirection:'row'
в style.containerВысота 100%, если
flexDirection:'column'
в style.containerисточник
Ну вот:
Просто измените стиль line1, как показано ниже:
источник
Используйте JavaScript, чтобы получить ширину и высоту и добавить их в стиле View. Чтобы получить полную ширину и высоту, используйте
Dimensions.get('window').width
https://facebook.github.io/react-native/docs/dimensions.htmlа потом,
источник
Сначала добавьте размерный компонент:
Второе определение переменных:
В-третьих, поместите это в таблицу стилей:
На самом деле в этом примере я хотел сделать отзывчивый вид и хотел видеть только 0,25 вида экрана, поэтому я умножил его на 0,25, если вы хотите, чтобы 100% экрана не умножали его на что-то вроде этого:
источник
источник
просто удалите
alignItems: 'center'
в контейнере стили и добавьтеtextAlign: "center"
вline1
стилю , как приведено ниже.Это будет хорошо работать
источник
попробуй это:
источник
width: '100%'
иalignSelf: 'stretch'
не работал на меня.Dimensions
не подходил для моей задачи, потому что мне нужно было работать с глубоко вложенным представлением. Вот что сработало для меня, если я переписал твой код. Я просто добавил еще несколькоView
s и использовалflex
свойства для достижения нужного макета:источник