Question

[错误图片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',

      },
});

Answer 1

所以看起来问题在于boxContainer的风格。 ScrollView不支持justifyContent，除非您将其作为contentContainerStyle prop的一部分传递，或者将所有内容包装在ScrollView中并为该视图提供合理的内容。个人经验说，将内容包装在滚动视图中的自己的视图标记中。

<ScrollView style={ styles.boxOne }
 <View style={ style.boxContainer }>
   {content goes here}
 </View>
</ScrollView>

Answer 2

我的 flatlist 也有同样的问题。这足以移动到另一个 alignItems: 'center' 和 justifyContent: 'center',

   <FlatList
        style={styles.screen}
        data={orders}
        renderItem={itemData =>
            <View style={styles.screenView}>
                <Text>{itemData.item.totalAmount}</Text>
            </View>}
        />
const styles = StyleSheet.create({
 screen: {
        flex: 1,
        backgroundColor: Colors.background,

    },
    screenView: {
        alignItems: 'center',
        justifyContent: 'center',
    }})

不变违规：ScrollView子布局（[＆＃34; justifyContent＆＃34;]）必须通过contentContainerStyle prop应用

2 个答案: