Как правильно наложить компоненты на React Native - PullRequest
Новая
       75

Как правильно наложить компоненты на React Native

0 голосов
/ 10 июня 2019

Я пытаюсь создать приложение с собственной реакцией, и у меня возникли проблемы с созданием начального экрана, потому что я не совсем понимаю, как наложить компоненты на экран и заставить их все отображаться.

Iпытался изменить код в определенных частях, и это либо создает ошибку, либо появляется только часть экрана.

Вот как должен выглядеть экран

enter image description here

и вот как это выглядит

enter image description here

Это код в файле 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>
    );
}

}

1 Ответ

1 голос
/ 10 июня 2019

Ваш LoadingImage компонент не отображает children. Все, что вы вложите в этот компонент, например, PopDownPanel в вашем случае, будет передано через реквизит и доступно для this.props.children.

Например: 

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