Question

我的滚动视图只是没有在屏幕上显示所有组件。

我该如何解决？如您在下面的代码中看到的，有一个图像和4个文本输入。但是滚动视图仅显示图像和2个文本输入。我在滚动视图中放置了一个边框，以查看其大小，它是整个屏幕的大小。

这是我的代码：

    render(){
        return (
            <ScrollView style={styles.container}>
                <TouchableOpacity onPress={this.myFun} style={styles.choosePhoto}>
                    <Thumbnail large source={this.state.avatarSource} style={styles.thumb}/>
                </TouchableOpacity>

                <Form>
                    <FormItem texto='Name'/>
                    <FormItem texto='CPF' keyboardType={'numeric'}/>
                    <FormItem texto='Email'/>
                    <FormItem texto='Password'/>
                </Form>
            </ScrollView>

        )
    }
}
const styles = StyleSheet.create({
    container:{
        flex: 1,
    },
    thumb:{
        width: '100%',
        height: '100%',
    },
    choosePhoto:{
        borderWidth: 1,
        width: '35%',
        height: '35%',
        alignSelf: 'center',
        alignItems: 'center',
        marginTop: '25%',
        justifyContent: 'center',    
    },
})

文本输入：

import React, {Component} from 'react';
import {Item, Label, Input} from 'native-base';
import {StyleSheet} from 'react-native';
export default class FormItem extends Component{
    render(){
        return (
            <Item style={styles.campo} floatingLabel>
                <Label>{this.props.texto}</Label>
                <Input secureTextEntry={this.props.secureTextEntry} keyboardType={this.props.keyboardType}/>
            </Item>
        )
    }
}
const styles = StyleSheet.create({
    campo:{
        marginRight: '7%',
        marginLeft: '7%',
    },
})

我的屏幕上出现的内容：

Answer 1

可能与您的本机基本Form组件有关的一个问题使它具有flex：1的样式，我希望它可以解决

ScrollView不会显示我的所有组件-React Native

1 个答案: