如何在 React Native 上正确地分层组件
How to layer components properly on React Native
我正在尝试使用 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>
);
}
}
您的 LoadingImage
组件未呈现 children
。您嵌套在该组件中的任何内容,例如您的案例中的 PopDownPanel
,都将通过 props 传递并由 this.props.children
.
访问
例如:
class ComponentWithChildren extends Component {
render() {
return (
<View>
{this.props.children}
</View>
)
}
}
我正在尝试使用 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>
);
}
}
您的 LoadingImage
组件未呈现 children
。您嵌套在该组件中的任何内容,例如您的案例中的 PopDownPanel
,都将通过 props 传递并由 this.props.children
.
例如:
class ComponentWithChildren extends Component {
render() {
return (
<View>
{this.props.children}
</View>
)
}
}