react-native - 你如何为 ios 使用 zIndex 或海拔

Question

我有一个用于 web 和 ios 的跨平台应用程序，带有 react-native-web 和 expo。登录期间有一段时间正在处理它，我正在渲染一个微调器。

微调器仅显示在网络上。

import React from 'react'
import { View, Image, StyleSheet } from 'react-native'
import {
  Headline,
  withTheme,
  type Theme,
  Paragraph,
  ActivityIndicator,
  Colors
} from 'react-native-paper'

import { APP_NAME } from '@src/lib/constants'

type Props = {
    theme: Theme,
}

class Splash extends React.Component<Props> {
  render() {
    return (<View style={styles.container}>
          <Headline style={styles.header}>{ APP_NAME }</Headline>
          {this.props.spinner?
              (<View style={styles.body}>
                  <View style={styles.spinner}>
                      <ActivityIndicator animating={true} color={Colors.grey400} />
                  </View>
                  <View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
                    <Image style={{width: 512, height: 512}} source={require('@src/media/123go-big.png')}/>
                  </View>
              </View>):
              (<View style={styles.body}>
                <Paragraph>{ this.props.message || '' }</Paragraph>
                <View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
                    <Image style={{width: 256, height: 256}} source={require('@src/media/123go-big.png')}/>
                </View>
              </View>)
          }
      </View>)
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,

    paddingVertical: 12
  },
  header: {
    paddingVertical: 36,
    textAlign: 'center'
  },
  body: {
    position: 'fixed',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    zIndex: 0,
    flex: 1,
    flexDirection: 'column',
    paddingVertical: 3,
    paddingHorizontal: 3
  },
  spinner: {
    position: 'fixed',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: Colors.black,
    justifyContent: 'center',
    alignItems: 'center',
    opacity:0.5,
    zIndex:2
  }
})

export default withTheme(Splash)