[The错误图像1 ]
当前行为如果我尝试在视图中嵌套ScrollView，则会收到此图像。
预期行为由于KeyBoardAvoidingView将输入框推到顶部并隐藏了其中的一些，因此我希望ScrollView能够滚动输入框，以便可以看到隐藏的内容，但当我尝试使用代码执行此操作时，我得到了上图中的错误。
import React from 'react';
import {StyleSheet, View, TextInput, TouchableOpacity, Text, KeyboardAvoidingView, StatusBar, ScrollView} from 'react-native';
export default class SignUp extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={60} style={styles.container}>
<StatusBar backgroundColor = "#FFFFFF" barStyle = "dark-content" hidden = {true}/>
<View style={styles.boxContainer}>
<View style = {[styles.boxContainer, styles.boxOne]}>
<ScrollView style = {[styles.boxContainer, styles.boxOne]} >
<TextInput
style={styles.inputBox}
placeholder="full name"
placeholderTextColor="#00000030"
underlineColorAndroid="transparent">
</TextInput>
<TextInput
style={styles.inputBox}
placeholder="email or phone"
placeholderTextColor="#00000030"
underlineColorAndroid="transparent"
autoCapitalize="none">
</TextInput>
<TextInput
style={styles.inputBox}
placeholder="date of birth"
placeholderTextColor="#00000030"
underlineColorAndroid="transparent"
autoCapitalize="none">
</TextInput>
<TextInput
style={styles.inputBox}
placeholder="username"
placeholderTextColor="#00000030"
underlineColorAndroid="transparent"
autoCapitalize="none">
</TextInput>
<TextInput
style={styles.inputBox}
secureTextEntry={true}
placeholder="password"
placeholderTextColor="#00000030"
underlineColorAndroid="transparent"
autoCapitalize="none">
</TextInput>
</ScrollView>
</View>
<View style={styles.boxContainerToggle}>
<TouchableOpacity
style={[styles.boxContainer, styles.boxTwo]}>
<Text style={styles.paragraph}>Login</Text>
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
boxContainer: {
flex: 1, // 1:3
justifyContent: 'center',
},
boxContainerToggle: {
flex: 1,
flexDirection: 'row',
padding: 20,
backgroundColor: 'white',
},
boxOne: {
flex: 5, // 5:6
backgroundColor: 'white',
padding: 20
},
boxTwo: {
flex: 1, // 1:6
backgroundColor: '#252525',
flexDirection: 'row',
width: '100%',
height: '100%',
alignItems: 'center'
},
inputBox: {
height: 40,
backgroundColor: '#B6B6B630',
marginBottom: 10,
paddingHorizontal: 10,
},
paragraph: {
fontSize: 27,
fontWeight: 'bold',
textAlign: 'center',
color: '#FFFFFF',
},
});
4条答案
按热度按时间btxsgosb1#
所以看起来问题出在boxContainer的样式上。ScrollView不支持justifyContent，除非你将它作为contentContainerStyle属性的一部分传递，或者你将你的所有内容 Package 在ScrollView中并将justify内容提供给该视图。个人经验告诉你，将你的内容 Package 在scrollview中，放在它自己的view标签中。
z9smfwbn2#
请使用内容容器样式代替样式
csga3l583#
我的平面列表也有同样的问题。这足以移动到另一个alignItems："居中"和对齐内容："中心"，
bxpogfeg4#
ScrollView的子元素的定位必须通过contentContainerStyle属性完成。
在这种情况下，对齐内容必须是contentContainerStyle prop的一部分，其他样式也可以是style prop的一部分。示例代码如下所示：
和样式可以应用如下. flex：1沿着理由内容：“center”使ScrollView的内容居中。