Как уменьшить пространство между этими компонентами View React Native
Итак, я только учусь ... создаю приложение для викторины в react-native, и я думаю, что пространство между первым рядом кнопок и вторым рядом кнопок слишком велико, как я могу его уменьшить? Благодарность
<LinearGradient colors = {['#0D0B18','#28263E']} style = {styles.container}>
<Text style = {styles.question}>After Jesus rose from the dead, how long did he remain on earth before ascending to heaven? </Text>
<View style = {styles.buttonRow}>
<TouchableOpacity style = {styles.buttonStyle} onPress = {this.onPress}>
<Text style = {styles.buttonText}>12 days</Text>
</TouchableOpacity>
<TouchableOpacity style = {styles.buttonStyle} onPress = {this.onPress}>
<Text style = {styles.buttonText}>40 days</Text>
</TouchableOpacity>
</View>
<View style = {styles.buttonRow}>
<TouchableOpacity style = {styles.buttonStyle}onPress = {this.onPress}>
<Text style = {styles.buttonText}>3 months</Text>
</TouchableOpacity>
<TouchableOpacity style = {styles.buttonStyle} onPress = {this.onPress}>
<Text style = {styles.buttonText}>1 year</Text>
</TouchableOpacity>
</View>
<View style = {styles.progressStyle}>
<ProgressViewIOS
style = {styles.progressView}
progress = {(0.2)}
/>
</View>
</LinearGradient>
const styles = StyleSheet.create ({
container: {
flex: 3,
},
question: {
paddingTop: '20%',
padding: 30,
flex: 1,
color: '#fff',
fontSize: 25
},
buttonRow : {
marginTop: 0,
flexDirection: 'row',
color: '#fff',
alignItems: 'center',
justifyContent: 'space-evenly',
},
buttonStyle: {
backgroundColor: '#fff',
width: '40%',
height: '50%',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 10
},
buttonText: {
color: '#000'
},
progressView: {
width: '90%',
},
progressStyle: {
padding: 20,
alignItems: 'center',
justifyContent: 'center',
}
});
Ответы 1
Маленький, вам не нужен flex: 3 для элемента без братьев и сестер, это не имеет особого значения, но вам нужно назначить ему flex: 1 только в том случае, если он один и не должен занимать больше места по сравнению с его братьями и сестрами.
Чтобы ваши кнопки отображались красиво, вы должны дать им оболочку:
<View style = {styles.buttonWrapper}>
<View style = {styles.buttonRow}>
<TouchableOpacity style = {styles.buttonStyle} onPress = {this.onPress}>
<Text style = {styles.buttonText}>12 days</Text>
</TouchableOpacity>
<TouchableOpacity style = {styles.buttonStyle} onPress = {this.onPress}>
<Text style = {styles.buttonText}>40 days</Text>
</TouchableOpacity>
</View>
<View style = {styles.buttonRow}>
<TouchableOpacity style = {styles.buttonStyle} onPress = {this.onPress}>
<Text style = {styles.buttonText}>3 months</Text>
</TouchableOpacity>
<TouchableOpacity style = {styles.buttonStyle} onPress = {this.onPress}>
<Text style = {styles.buttonText}>1 year</Text>
</TouchableOpacity>
</View>
</View>
где styles.buttonWrapper - это просто:
buttonWrapper: {
flex: 1,
justifyContent: "space-around"
},
Теперь ваша группа кнопок и вопрос будут занимать одинаковое количество места после того, как будет учтена высота вашего индикатора выполнения, а группа кнопок будет сплющена вместе благодаря justifyContent: 'space-around'.
Однако это изменяет размер кнопок, поэтому, чтобы это работало, вы должны изменить стили кнопок на что-то вроде:
buttonStyle: {
backgroundColor: "#fff",
flex: 1,
marginHorizontal: 5,
aspectRatio: 2,
justifyContent: "center",
alignItems: "center",
borderRadius: 10
},
Вы можете увидеть это в действии здесь: https://snack.expo.io/HkWF-EsA7
Когда вы только начинаете, Flex может показаться немного странным, поэтому я рекомендую много экспериментировать. Есть интересные свойства, такие как aspectRatio, alignContent, alignSelf и многие другие (узнайте больше о них здесь). Поначалу это может расстраивать, но ваши макеты будут намного лучше, если вы сможете избежать использования ширины и высоты и вместо этого полностью использовать гибкость. Это не всегда возможно, но я думаю, что это отлично подойдет для того, чего вы пытаетесь достичь.
Надеюсь, это дало вам представление о том, что вы можете сделать в дальнейшем. Если у вас есть вопросы, дайте мне знать!