react-native - 不变性违规 : ScrollView child layout ( ["justifyContent"]) must be applied through the contentContainerStyle prop

Question

[错误图像 1 ]

当前行为
如果我尝试在 View 中嵌套 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 中并为该 View 提供 justify 内容。个人经验说，将您的内容包装在滚动 View 中的自己的 View 标签中。

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