React-native：组件不会在android屏幕下渲染超过特定点

Question

在屏幕下方大约75％的位置，Android不会渲染我的任何组件。参见下图：iPhone位于左侧，可渲染所有内容。 Android在右侧，未呈现文本字段，在底部未显示2个按钮。

这是组件树：

return (
            <ScrollView style={{backgroundColor: colors.JBTan}}>
                <View style={{alignItems: 'center'}}>
                    <View style={{alignItems: 'center'}}>
                        <Text style={styles.text}>
                            Join Private Game:
                        </Text>
                    </View>
                    <View style={{width: '90%'}}>
                        <TextField
                            placeholder='Game Name...'
                            maxLength={12}
                            onChangeText={GameName => this.setState({GameName})}
                        />
                    </View>
                    {message1}
                    <View style={{width: '90%'}}>
                        <TextField
                            placeholder='Password...'
                            maxLength={12}
                            onChangeText={Password => this.setState({Password})}
                        />
                    </View>
                    {message2}
                    <View style={{width: '90%'}}>
                        <TextField
                            placeholder='Player Name...'
                            maxLength={10}
                            onChangeText={Name => this.setState({Name})}
                        />
                    </View>
                    {message3}
                    <View style={{alignItems: 'center'}}>
                        <PrimaryButton
                            onPress={() => this.joinPrivateGame()}
                            label="Join Game"
                        >
                        </PrimaryButton>
                    </View>
                    <View style={{alignItems: 'center'}}>
                        <Text style={styles.text}>
                            Join Public Game:
                        </Text>
                    </View>
                    <View
                        style={{
                            width: '90%',
                            height: '30%',
                            borderWidth: 2,
                            borderColor: colors.JBDarkTeal,
                            backgroundColor: 'white',
                            marginBottom: 5,
                            paddingBottom: 10,
                            marginTop: 10,
                        }}
                    >
                        <ScrollView>
                            <FlatList
                                data={this.state.game_names}
                                renderItem={this.renderItem}
                                keyExtractor={(item, index) => index.toString()}
                                extraData={this.state.game_selected}
                            />
                        </ScrollView>
                    </View>
                    // nothing rendering from here down...
                    {message4}
                    <View style={{width: '90%'}}>
                        <TextField
                            placeholder='Player Name...'
                            maxLength={10}
                            onChangeText={NamePublic => this.setState({NamePublic})}
                        />
                    </View>
                    {message5}
                    <View style={{alignItems: 'center'}}>
                        <PrimaryButton
                            onPress={() => this.joinPublicGame()}
                            label="Join Game"
                        >
                        </PrimaryButton>
                        <PrimaryButton
                            onPress={() => this.goBack()}
                            label="Go Back"
                        >
                        </PrimaryButton>
                    </View>
                </View>
            </ScrollView>
        );

在scrollview和flatlist周围的视图容器样式中，如果我将高度更改为20％，则android看起来像这样，因此您可以看到它的截断位置：

我在android studio和Genymotion中得到相同的结果。知道为什么会这么做吗？

Answer 1

我不知道为什么，但是在环绕平面列表的视图中，它不喜欢我使用高度：“ 30％”。将其更改为高度：（Dimensions.get（'window'）。height）* .2得到我想要的结果。

<View
    style={{
        width: '90%',
        height: (Dimensions.get('window').height) * .2,
        borderWidth: 2,
        borderColor: colors.JBDarkTeal,
        backgroundColor: 'white',
        marginBottom: 5,
        paddingBottom: 10,
        marginTop: 10,
    }}
>
    <ScrollView>
        <FlatList
            data={this.state.game_names}
            renderItem={this.renderItem}
            keyExtractor={(item, index) => index.toString()}
            extraData={this.state.game_selected}
        />
    </ScrollView>
</View>