MIUI Page style display error, style disappears

[maomeiqi]

React Native version:

System:
OS: macOS 10.15.4
CPU: (6) x64 Intel(R) Core(TM) i5-9400F CPU @ 2.90GHz
Memory: 3.90 GB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.16.2 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.4 - /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.9.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK: Not Found
IDEs:
Android Studio: 3.6 AI-192.7142.36.36.6308749
Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
Languages:
Java: Not Found
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: Not Found
react-native: Not Found
npmGlobalPackages:
react-native: Not Found
react：16.11.0
React Native：0.62.2
SDK：
uildToolsVersion = "29.0.2"
minSdkVersion = 19
compileSdkVersion = 29
targetSdkVersion = 29
excludeAppGlideModule = true
glideVersion = "4.9.0"
Mobile version：
model： MI 8
android：10
MIUI：11.0.6

Description

Where elevation: 4 is set, the shadow will disappear and some text will also disappear

Expected Results

Should be displayed like this

But it is displayed like this

Change the background color of the page to #fffffd or add marginTop: 1 to the outermost layer of this page
This can be displayed normally, but I think it should not be done

Snack, code example, screenshot, or link to a repository:

`import React, {Component} from 'react';
import {Text, View, StyleSheet, Image, Dimensions} from 'react-native';
import {inject, observer} from 'mobx-react';
import PropTypes from 'prop-types';
import Touchable from '../../../components/common/Touchable';
import NavigationBar from '../../../components/common/NavigationBar';
import Toast from '../../../components/common/Toast';
import Http from '../../../utils/Http';
import XPay from 'react-native-puti-pay';
import UserActions from "../../../actions/UserActions";

const coin = require('../../../assets/icon/user/coin.png');
const weChat = require('../../../assets/icon/user/we_chat.png');
const alipay=require('../../../assets/icon/user/alipay.png')
const arrowRight = require('../../../assets/icon/user/arrow_right.png');

const styles = StyleSheet.create({
swiperBox: {
height: 100,
backgroundColor: 'blue',
},
content: {
borderTopColor: '#F2F2F2',
borderTopWidth: 1,
borderBottomColor: '#F2F2F2',
borderBottomWidth: 1,
marginBottom: 10,
marginTop: 5,
paddingVertical: 15,
backgroundColor: '#fff',
shadowColor: '#fff',
elevation: 4,
shadowOffset: {h: 0, w: 0},
shadowOpacity: 0.8,
flexDirection: 'column',
justifyContent: 'center',
},
contentImage: {
width: 25,
height: 25,
// backgroundColor:'red',
marginRight: 15,
},
contentText: {
fontSize: 16,
color: '#666666',
},
});

@Inject('store') @observer
class PayMethod extends Component {
static propTypes = {
navigation: PropTypes.shape({
navigate: PropTypes.func.isRequired,
}).isRequired,
};

static navigationOptions = () => ({
headerShown: false,
headerMode: 'none',
});

constructor(props) {
super(props);
this.state = {
package: props.route.params?.package,
};
}

_alipay(){
const key= Toast.loading('加载中');
Http.postForm('/api/zfb/pay/advanced/order',{package_id: this.state.package.ID}).then(res=>{
if (res.status === 10000) {
XPay.setAlipayScheme('alipay2021001117605249');
XPay.alipay(res.data,(res)=>{
Toast.hide(key);
if (res.resultStatus == 9000) {
Toast.message('支付成功');
UserActions.getUserBalance();
}else{
Toast.message(res.memo);
}
})
}else{
Toast.message('充值失败');
}
})
}

_wxPay() {
const key = Toast.loading('加载中');
Http.postForm('/api/wx/pay/advanced/order', {package_id: this.state.package.ID}).then(res => {
Toast.hide(key);
if (res.status === 10000) {
XPay.setWxId(res.appid);
let params = {
partnerId: res.partner_id,
prepayId: res.prepay_id,
packageValue: res.package,
nonceStr: res.nonce_str,
timeStamp: String(res.time_stamp),
sign: res.sign,
};
XPay.wxPay(params, (res) => {
if (res.errCode == '0') {
Toast.message('支付成功');
UserActions.getUserBalance();
}else if(res.errCode=='-2'){
Toast.message('已取消支付');
}else{
Toast.message('支付出错,联系客服');
}
});
} else {
Toast.message(res.message);
}
}).catch(err => {
Toast.hide(key);
Toast.message('通讯失败');
});
}

render() {
const {
navigation,
} = this.props;
return (
<View style={{
flex:1,
backgroundColor: '#ffffff',
}}
>
<View style={{
borderTopWidth: 1,
borderTopColor: '#F2F2F2',
marginBottom: 10,
marginTop:50,
paddingVertical: 15,
backgroundColor: '#fff',
shadowColor: '#fff',
elevation: 4,
shadowOffset: {h: 0, w: 0},
shadowOpacity: 0.8,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',

    }}
    >
      <Image
        source={coin}
        style={{
          marginBottom: 10,
        }}
      />
      <Text style={{fontSize: 15, color: '#666666', marginBottom: 6}}>购买：{this.state.package.amount}</Text>
      <Text style={{fontSize: 15, color: '#666666'}}>付款：{Number(this.state.package.price / 100).toFixed(2)}元</Text>
    </View>
    <Text style={{
      marginLeft: 30,
      fontSize: 14,
      color: '#999999',
      marginVertical: 10,
    }}
    >
      使用一下方式支付：
    </Text>

    <View style={styles.content}>
      <Touchable
        onPress={() => {
          this._wxPay();
        }}
        delayPress={300}
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          borderBottomWidth: 1,
          borderBottomColor: '#F2F2F2',
          marginHorizontal: 30,
          paddingBottom: 15,
        }}
      >
        <View style={{
          flexDirection: 'row',
          alignItems: 'center',
        }}
        >
          <Image
            source={weChat}
            style={styles.contentImage}
          />
          <Text style={styles.contentText}>微信支付</Text>
        </View>
        <Image
          source={arrowRight}
        />
      </Touchable>
      <Touchable
        onPress={()=>{
          this._alipay()
        }}
        delayPress={300}
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          marginHorizontal: 30,
          paddingTop: 15,
        }}
      >
        <View style={{
          flexDirection: 'row',
          alignItems: 'center',
        }}
        >
          <Image
            source={alipay}
            style={styles.contentImage}
          />
          <Text style={styles.contentText}>支付宝支付</Text>
        </View>
        <Image
          source={arrowRight}
        />
      </Touchable>
    </View>
    <Text style={{
      fontSize: 11,
      color: '#999999',
      paddingTop: 5,
      marginLeft: 30,
    }}
    >
      注：充值金额不可提现
    </Text>
  </View>
);

}
}
export default PayMethod;`

[github-actions]

⚠️	Missing Environment Information
ℹ️	Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

[maomeiqi]

info Fetching system and libraries information...
System:
OS: macOS 10.15.4
CPU: (6) x64 Intel(R) Core(TM) i5-9400F CPU @ 2.90GHz
Memory: 3.90 GB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.16.2 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.4 - /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.9.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK: Not Found
IDEs:
Android Studio: 3.6 AI-192.7142.36.36.6308749
Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
Languages:
Java: Not Found
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: Not Found
react-native: Not Found
npmGlobalPackages:
react-native: Not Found

[maomeiqi]

+1

[maomeiqi]

+2

[maomeiqi]

Did I upload anything less?

[chrisglein]

There seem to be issues with the environment info you've provided. For example:

react: Not Found
react-native: Not Found