在Android上的Modal中，React Native TextInput损坏

Question

我在React-native应用程序的模态中有一个TextInput。它可以在iO和Pixel设备上完美运行。在华为和Oppo上，TextInput确实很奇怪。很难集中注意力（我必须按屏幕上非常特定的部分，并且有时只能使用）。我有橙色和红色的成分在图片中显示。

<React.Fragment>
  <Modal
    visible={showPaymentScreen}
    onRequestClose={this.closeWindow}
    presentationStyle='fullScreen'
    animationType='slide'
  >
    <AvoidKeyboard>
      <InputRow>
        <InputRow>
          <CreditTextWrapper>
            <CreditText>$ </CreditText>
          </CreditTextWrapper>
          <InputWrapper>
            <CreditInput
              onChangeText={this.onValueChange}
              keyboardType='numeric'
              maxLength={5}
              value={this.state.paymentAmount}
            />
          </InputWrapper>
        </InputRow>
      </InputRow>
    </AvoidKeyboard>
  </Modal>
</React.Fragment>

const AvoidKeyboard = styled(KeyboardAwareScrollView)``;

const InputRow = styled.View`
  flex: 1;
  flex-direction: row;
  border-bottom-color: ${underlineColor};
  border-bottom-width: 1;
  padding: 5px;
  background-color: orange;
`;

const InputWrapper = styled.View`
  width: 50;
  background-color: blue;
`;

const CreditInput = styled.TextInput`
  height: 40;
  width: 400;
  font-size: 17;
  background-color: red;
`;