Question

这是我的确切代码：

    <Image source={require('./images/person.png')} style={styles.backgroundImage} >

        <View style={styles.container}>
            <Greeting name='Rexxar' />
            <Greeting name='Jaina' />
            <Greeting name='Valeera' />
            <Bananas />
            <Blinking />
        </View>
    </Image>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  backgroundImage: {
    flex: 1,
    resizeMode: 'contain', 
    width : null,
    height : null
  }
}

当我尝试添加person.png作为背景图像时，它工作正常，但图像作为最后一个组件加载，这不是一个好的行为，因为我希望背景图像显示在其他所有内容之前。有没有办法避免这种情况，或者我可能是错误地做错了？

Answer 1

这可以通过处理Image的onLoad事件来完成。

<Image 
  source={require('./images/person.png')} 
  style={styles.backgroundImage}
  onLoad={e => this.setState({ viewVisible: true })}
>
  {this.state.viewVisible ?
     <View style={styles.container}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
        <Bananas />
        <Blinking />
     </View>
  : null}
</Image>

React Native：背景图片作为最后一个组件加载，尽管它首先被添加

1 个答案: