如何在本机反应中使用flexbox网格？
问题：
在我的react native应用程序中，我正在网格中加载一组视图。但它是这样显示的。
但是我需要这样显示，这意味着在同一行中有两个视图，并且高度如下图所示。
问题是当我更改网格中视图的高度时，视图内的文本未居中
这就是我组织代码的方式。
const _getAnswers = (
index,
questions,
answerList,
setAnswerList,
styles,
currentLocale,
setAnswers,
) => {
let question;
let answers;
let locale = currentLocale();
question = questions[index];
if (question.question.questionType === 0) {
answers = JSON.parse(question.question.setOfAnswers);
return answers.map((answer, i) => {
return (
<AnswerToggle
key={i}
styles={styles}
question={question}
answer={answer}
locale={locale}
answerIndex={i}
onchange={() =>
setAnswers(index, answerList, setAnswerList, question, i)
}
answerList={answerList}
/>
);
});
} else if (question.question.questionType === 1) {
answers = JSON.parse(question.question.setOfAnswers);
return (
<View style={styles.answerListContainer}>
{answers
? answers.map((answer, i) => {
var answerArray = JSON.parse(answerList);
return (
<TouchableOpacity
key={i}
style={
answerArray.indexOf(i) === 0
? styles.selectedAnswer
: styles.notselectedAnswer
}
onPress={() =>
setAnswers(index, answerList, setAnswerList, question, i)
}>
<View style={styles.answerRow}>
<AppText
styles={
answerArray.indexOf(i) === 0
? styles.answerRowTextSelected
: styles.answerRowText
}>
{answer[locale]}
</AppText>
</View>
</TouchableOpacity>
);
})
: null}
</View>
);
}
};
const AnswerView = (props) => {
const {
navigation,
styles,
questions,
index,
answerList,
setAnswerList,
currentLocale,
submitAnswer,
setAnswers,
loadding,
submit,
endQuestionId,
setEndQuestionId,
setindex,
fileName,
uploadvideo,
mutimediaupload,
fileObject,
clearmultimedia,
encodedFileName,
userDetails,
setquestionarray,
questionsArray,
questionCange,
updatequestionarray,
updatequestionchange,
} = props;
return (
<View style={styles.patientView}>
<View style={styles.questionsContainer}>
<ScrollView style={styles.answersContainer}>
{questions &&
_getAnswers(
index,
questions,
answerList,
setAnswerList,
styles,
currentLocale,
setAnswers,
)}
<TouchableOpacity
style={styles.sendButton}
disabled={loadding}
onPress={() => {
if (questions) {
if (questionCange && index !== questionCange) {
Alert.alert(
'Alert',
strings('assetsment.back-update-text'),
[
{
text: strings('assetsment.cancel'),
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
{
text: strings('assetsment.btn-text'),
onPress: () => {
updatequestionarray(index);
submitAnswer(
index,
questions,
answerList,
setAnswerList,
submit,
navigation,
setindex,
endQuestionId,
setEndQuestionId,
fileName,
uploadvideo,
mutimediaupload,
fileObject,
clearmultimedia,
userDetails,
setquestionarray,
questionsArray,
questionCange,
updatequestionchange,
);
},
},
],
{cancelable: false},
);
} else {
submitAnswer(
index,
questions,
answerList,
setAnswerList,
submit,
navigation,
setindex,
endQuestionId,
setEndQuestionId,
fileName,
uploadvideo,
mutimediaupload,
fileObject,
clearmultimedia,
userDetails,
setquestionarray,
questionsArray,
questionCange,
updatequestionchange,
);
}
}
}}>
{loadding ? (
<Image source={spinner} style={styles.bimage} />
) : (
<AppText styles={styles.sendButtonText}>
{strings('answers.btn-text')}
</AppText>
)}
</TouchableOpacity>
</ScrollView>
</View>
</View>
);
};
export default AnswerView;
这就是我组织样式的方式。
const styles = StyleSheet.create({
patientView: {
flex: 1,
backgroundColor: '#ffffff',
flexDirection: 'column',
},
top: {
height: '8%',
},
updateAgainContainer: {
flexDirection: 'row',
marginTop: '-3%',
// backgroundColor: 'red',
},
reloadIcon: {
fontSize: normalize(15),
color: '#417505',
fontWeight: '600',
textAlign: 'center',
},
questionsContainer: {
height: '78%',
// backgroundColor: '#f2f2f2',
// elevation: 5,
shadowColor: '#000',
shadowOffset: {width: 0, height: 4},
shadowOpacity: 0.8,
shadowRadius: 8,
flex: 1,
},
hr: {
marginTop: '5%',
borderBottomColor: '#c3c3c3',
borderBottomWidth: 2.0,
marginRight: 30,
marginLeft: 30,
justifyContent: 'center',
},
bottom: {
height: '7%',
justifyContent: 'center',
alignItems: 'center',
},
patientBottomView: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
patientBottomContainerText: {
fontSize: normalize(13),
color: '#444444',
fontWeight: '500',
},
bottomLinkText: {
fontSize: normalize(13),
color: '#484848',
borderBottomWidth: 2,
borderBottomColor: '#c3c3c3',
},
imageContainer: {
height: '30%',
justifyContent: 'center',
alignItems: 'center',
paddingTop: '25%',
},
questionsInnerContainerWV: {
height: '55%',
paddingRight: '5%',
paddingLeft: '3%',
paddingTop: '5%',
},
questionsInnerContainer: {
height: '30%',
paddingRight: '5%',
paddingLeft: '3%',
paddingTop: '5%',
},
btnContainer: {
paddingLeft: '5%',
paddingRight: '5%',
marginBottom: '12%',
justifyContent: 'center',
},
btnContainerWV: {
paddingLeft: '5%',
paddingRight: '5%',
marginBottom: '12%',
justifyContent: 'center',
marginTop: '-5%',
},
emtyView: {
height: '5%',
},
img: {
width: '50%',
resizeMode: 'contain',
},
questionTitleView: {
paddingBottom: '2.5%',
position: 'relative',
height: '15%',
flexDirection: 'row',
marginBottom: '1%',
alignItems: 'center',
alignContent: 'center',
},
questionTitle: {
color: '#444444',
fontSize: normalize(11),
fontWeight: '600',
},
stageName: {
color: '#444444',
fontSize: normalize(11),
fontWeight: '600',
marginLeft: '1%',
textAlign: 'center',
// paddingBottom: '2%',
// paddingTop: '1%',
// marginBottom: '2%',
},
questionTextContainerWV: {
backgroundColor: '#d1e5ff',
paddingTop: '6%',
paddingBottom: '6%',
paddingLeft: '4%',
paddingRight: '4%',
borderRadius: 10,
height: '80%',
},
questionTextContainer: {
backgroundColor: '#d1e5ff',
paddingTop: '6%',
paddingLeft: '4%',
paddingRight: '4%',
borderRadius: 10,
paddingBottom: '6%',
},
questionText: {
fontSize: normalize(13),
color: '#444444',
fontWeight: '700',
},
questionTextWV: {
fontSize: normalize(13),
color: '#444444',
fontWeight: '700',
paddingBottom: '2%',
},
questionsLodder: {
width: '20%',
height: '20%',
alignSelf: 'center',
justifyContent: 'center',
marginTop: '50%',
},
previewContainerWV: {
height: '35%',
marginLeft: '10%',
marginRight: '10%',
// alignItems: 'center',
marginBottom: '2%',
marginTop: '1%',
},
previewContainer: {
height: '50%',
marginLeft: '10%',
marginRight: '10%',
// alignItems: 'center',
marginBottom: '2%',
},
previewInnerContainer: {
flex: 1,
},
camPImage: {
alignSelf: 'center',
marginTop: '-15%',
},
camPImageWV: {
alignSelf: 'center',
marginTop: '-10%',
},
camPText: {
color: '#444444',
fontSize: normalize(13),
fontWeight: '600',
marginTop: '-25%',
textAlign: 'center',
},
answersContainer: {
flex: 1,
paddingLeft: '8%',
paddingRight: '8%',
},
answerContentContainer: {
flexDirection: 'row',
paddingBottom: '5%',
paddingTop: '2%',
paddingLeft: '5%',
paddingRight: '5%',
},
answerTextContainer: {
flex: 1,
paddingRight: '10%',
},
sendButton: {
flex: 1,
backgroundColor: '#3e92ff',
paddingTop: 10,
paddingBottom: 10,
alignItems: 'center',
borderRadius: 50,
marginTop: 25,
marginBottom: 20,
justifyContent: 'center',
},
sendButtonText: {
fontFamily: 'Montserrat-Medium',
color: '#ffffff',
fontWeight: '300',
fontSize: normalize(15),
textAlign: 'center',
letterSpacing: 2,
},
bimage: {
width: 25,
height: 25,
},
toggle: {
transform: [{scaleX: 1.6}, {scaleY: 1.6}],
elevation: 90,
shadowColor: '#000000',
shadowOffset: {width: 0, height: 3},
shadowOpacity: 0.9,
shadowRadius: 50,
},
answerText: {
color: '#444444',
fontWeight: '600',
fontSize: normalize(13),
},
backgroundVideo: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
},
videoContainer: {
height: '70%',
},
videoInnerContainer: {
flex: 1,
backgroundColor: '#b8b8b8',
},
videoBottomText: {
height: '20%',
alignItems: 'center',
justifyContent: 'center',
marginTop: '8%',
},
reloadText: {
textAlign: 'center',
marginLeft: '5%',
color: '#417505',
fontWeight: '600',
fontSize: normalize(14),
marginBottom: '5%',
},
reloadTextContainer: {
flex: 1,
},
controlOverlay: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
alignItems: 'center',
justifyContent: 'center',
// alignSelf: 'center',
},
loadderContainer: {
justifyContent: 'center',
alignItems: 'center',
marginTop: '50%',
},
loadderContainerWI: {
justifyContent: 'center',
alignItems: 'center',
marginTop: '-1%',
},
imagePreview: {
width: '80%',
height: '80%',
justifyContent: 'center',
},
carasouelContainer: {
flex: 1,
marginBottom: '5%',
},
controlsOverlay: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'center',
alignItems: 'center',
},
answerListContainer: {
flexDirection: 'row',
alignItems: 'flex-start',
justifyContent: 'space-between',
flex: 1,
flexWrap: 'wrap',
marginBottom: '5%',
},
selectedAnswer: {
backgroundColor: '#3e92ff',
width: '45%',
height: '40%',
paddingBottom: '3%',
paddingTop: '3%',
borderRadius: 5,
borderWidth: 2,
borderColor: '#3e92ff',
borderStyle: 'solid',
marginBottom: '5%',
},
notselectedAnswer: {
backgroundColor: 'white',
width: '50%',
height: '40%',
paddingBottom: '3%',
paddingTop: '3%',
borderWidth: 2,
borderColor: '#3e92ff',
borderStyle: 'solid',
borderRadius: 5,
marginBottom: '5%',
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
paddingLeft: '2%',
paddingRight: '2%',
},
answerRow: {
flex: 1,
},
answerRowText: {
textAlign: 'center',
color: '#444444',
fontWeight: '600',
},
answerRowTextSelected: {
textAlign: 'center',
color: '#ffffff',
fontWeight: '600',
},
});
export default styles;
我尝试了很多样式更改，但问题仍然相同。当高度变化时，我想将文本居中。有人可以帮我解决这个问题吗？谢谢。
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？