不变冲突：必须通过 contentContainerStyle 属性应用 ScrollView 子布局 ([ "justifyContent" ])

Question

[错误图像 1]

当前行为如果我尝试在视图中嵌套滚动视图，则会收到此图像。

预期行为由于键盘避免视图将输入框推到顶部并隐藏其中一些，我希望 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 属性的一部分传递，或者将所有内容包装在 ScrollView 中并为该视图提供对齐内容。个人经验说，将您的内容包装在滚动视图中，并在其自己的视图标签中。

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

Answer 2

请使用contentContainerStyle代替样式

<ScrollView contentContainerStyle={styles.scrollView}>
   <Text>Hello World!</Text>
</ScrollView>

Answer 3

我的平面列表也有同样的问题。这足以移动到另一个对齐项："中心"和对齐内容："中心"，

   <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',
    }})

Answer 4

ScrollView 的子元素的定位必须通过 contentContainerStyle prop 完成。

在这种情况下，对齐内容必须是 contentContainerStyle 道具的一部分，其他样式可以是样式道具的一部分。示例代码如下所示：

<ScrollView horizontal={true} style={styles.scrollWrapper} contentContainerStyle={styles.scrollContent}> 
... {children}
</ScrollView>

样式可以按如下方式应用。 flex： 1 连同 justifyContent： 'center' 使 ScrollView 的内容居中。

const styles = StyleSheet.create({
  scrollWrapper: {
    borderBottomColor: COLORS.line_grey,
    borderBottomWidth: 1
  },
  scrollContent:{
    justifyContent: 'center',
    flex:1
  }
})