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

Question

我正在尝试使用 react native 构建一个应用程序，并且在构建初始屏幕时遇到了一些麻烦，因为我没有正确理解如何将组件分层到屏幕上并使其全部显示。

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

这就是屏​​幕的样子

这就是它的样子

这是 Screen JS 文件中的代码

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

}

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

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 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>
    );
}

}

Answer 1

您的LoadingImage组件不渲染children。您嵌套在该组件中的任何内容，例如PopDownPanel在您的情况下，都将通过 props 传递并由this.props.children.

例如：

class ComponentWithChildren extends Component {
  render() {
    return (
      <View>
        {this.props.children}
      </View>
    )
  }
}