React native 如何在React Native上正确分层组件

我正在尝试用react native构建一个应用程序，但在构建初始屏幕时遇到了一些问题，因为我不知道如何将组件分层到屏幕上并使其全部显示出来

我试图更改某些部分的代码，它要么产生错误，要么只显示屏幕的一部分

这就是屏幕的外观

这是它的样子

这是屏幕JS文件中的代码

class SearchScreen extends Component<Props>{
   render(){
       return (
           <LoadingImage>
               <PopDownPanel/>
           </LoadingImage>
       );    
   }

类搜索屏幕扩展组件{
render（）{
返回(
);    
}

}

这是带有搜索按钮的面板的代码

class PopDownPanel extends Component<Props>{
constructor(props){
    super(props);
    this.state = {taxonA: '', taxonB: ''}
}

handleTaxonA = (text) => {
    this.setState({taxonA : text})
}
handleTaxonB = (text) => {
    this.setState({taxonB : text})
}
_onPress = () => {
    alert("Taxon A: "+ this.state.taxonA + "\n" + "Taxon B: " + this.state.taxonB);
}
render(){
    return(
        <Animatable.View
            animation = 'fadeOutRight'
            delay = {5000}
        >
            <View style = {styles.panel}/>
                <View style = {styles.boxA}>
                    <TextInput
                        fontSize = {15}
                        placeholder = 'Taxon A...'
                        onChangeText = {this.handleTaxonA}
                        style = {styles.words}
                    />
                </View>
                <View style = {styles.boxB}>
                    <TextInput
                        placeholder = 'Taxon B...'
                        onChangeText = {this.handleTaxonB}
                        style = {styles.words}
                    />
                </View>
                <TouchableOpacity
                    style = {styles.searchButton}
                    onPress = {this._onPress}
                >
                    <Text style = {styles.words}>Search</Text>
                </TouchableOpacity>
        </Animatable.View>
    );
}

class PopDownPanel扩展组件{
建造师（道具）{
超级（道具）；
this.state={taxonA:''，taxonB:'}
}
handleTaxonA=（文本）=>{
this.setState（{taxonA:text}）
}
handleTaxonB=（文本）=>{
this.setState（{taxonB:text}）
}
_onPress=（）=>{
警报（“分类单元A:+this.state.taxonA+”\n“+”分类单元B:+this.state.taxonB）；
}
render（）{
返回(
搜索
);
}

}

这是背景图像的代码

class LoadingImage extends Component<Props>{
constructor(props){
    super(props);
    this.state = {ready: false};
}

render(){
    return (
        <ImageBackground
            source = {require('../assets/images/TimeTreeSearch.png')}
            style = {{width: '100%', height: '100%'}}
            imageStyle = {{resizeMode: 'contain'}}
        >
            <Animatable.Image
                source = {require('../assets/images/TimeTree_Gray.png')}
                animation = 'fadeOut'
                iterationCount = {1}
                useNativeDriver = {true}
                style = {{height: '100%', width: '100%'}}
                resizeMode = 'contain'
                easing = 'ease-in-out'
            />
        </ImageBackground>
    );
}

类加载图像扩展组件{
建造师（道具）{
超级（道具）；
this.state={ready:false}；
}
render（）{
返回(
);
}

---

}您的

加载图像

组件不会呈现

子对象

。您嵌套在该组件中的任何内容，例如您案例中的

PopDownPanel

，都将通过props传递，并可由

this.props.children

访问

例如：

class Component with children扩展组件{
render（）{
返回(
{this.props.children}
)
}
}