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

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

1 个答案: