Width: '100%' vs Dimension.get ('window'). width в react native
Я новичок, чтобы реагировать на родной и css-стиль в целом, так что извините, если вопрос очень простой. Я хочу, чтобы представление занимало 100% доступной ширины экрана, и когда я использую приведенный ниже код, мое представление выходит за пределы экрана, хотя, когда я использую Dimension.get ('window'). Width, он работает нормально. может кто-нибудь объяснить, чем они отличаются друг от друга. Любая помощь могла бы быть полезна. Благодарность
return(
<TouchableOpacity style = {styles.food_wrapper}
onPress = {()=> this.userAction()}
>
<Text style = {styles.foodname}>
{this.name}
</Text>
<Text style = {styles.foodprice}>
Rs: {this.price}
</Text>
</TouchableOpacity>
);
food_wrapper:{
flex: 1,
flexDirection :'row',
justifyContent:'space-between',
alignItems:'flex-start',
width: '100%',//Dimensions.get('window').width,
minHeight: 50,
marginVertical: '1%',
padding: '2%',
backgroundColor: 'rgb(155,200,200)'
},
Ответы 2
Вам нужно добавить представление оболочки с flexDirection: 'row', затем стилизовать дочернее представление (или Touchable или что-то еще) с помощью flex: 1
<View style = {{ flexDirection: 'row' }}>
<View style = {{ flex: 1, height: 100, backgroundColor: 'grey' }} />
</View>
Или вы можете использовать alignSelf: 'stretch' внутри нескольких с flexDirection: 'column' (по умолчанию для всех представлений)
Повесить там. Изучение flexbox требует некоторой практики. Ваша первая мысль, когда вы застряли, должна быть: "Мне нужно добавить представление оболочки?"
Вы должны понимать, в чем принципиальное отличие от 100% и в ширине, которую вы получаете при использовании dimension.get('window').
100% означает, что вы хотите получить 100% ширину контейнера, что означает, что если ваш родительский контейнер 50 пикселей, то 100% вернет 50 пикселей.
width от dimension дает вам статическую ширину ширины вашего устройства
поэтому будьте осторожны, выбирая, что использовать для вашего компонента
если вы хотите следовать за родительским контейнером, тогда проще использовать 100%, чем width из dimension, но по причинам реагирования без какого-либо родительского контейнера или это сам родитель, тогда width из dimension будет работать лучше
С удовольствием @ Syed.bcc