javascript - React Native : Background image loads as the last component, 尽管它是先添加的

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

这可以通过处理图像的 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>