React Native：UI在Android中不合适，但在iOS中工作正常

Question

我是ReactNative的新手。我已经在React Native中实现了一个UI，在iOS中它可以正常工作，但是在Android中，它在按钮上方显示了一些空白。请检查以下屏幕截图。

这是我正在使用的代码：

export default  class SignUpPage extends React.Component {
  static navigationOptions = {
    title: 'Sign Up',
  };
  render() {
    const {navigate} = this.props.navigation;
    return (
      <View>
        <View style={styles.fbButtonContainer}>
          <Button onPress={this._onPress} title="SIGN UP WITH FACEBOOK" color="#FFFFFF" accessibilityLabel="Tap on Me"/>
        </View>
        <View style={styles.textEmailInputContainer} >
          <Image source={require('./Images/mail_icon.png')} style={styles.imageIcons}/>
          <TextInput placeholder="Your Email Address" style={styles.txtInput}/>
        </View>
        <View style={styles.textPasswordInputContainer}>
          <Image source={require('./Images/password_icon.png')} style={styles.imageIcons}/>
          <TextInput placeholder="Create Password" style={styles.txtInput}/>
        </View>

          <View style={styles.magentaButtonContainer}>
            <Button 
              onPress={() => navigate('SignIn', {name: 'Jane'})}
              title="SIGN UP" color="#FFFFFF" accessibilityLabel="Tap on Me"/>
          </View>
      </View>
    );
  }
}

样式如下：

const styles = StyleSheet.create({
  imageIcons: {
    left: 11,
    top: 12,
  },
  fbButtonContainer: {
    backgroundColor: '#3855ca',
    borderRadius: 24,
    padding: 2,
    marginLeft: 18,
    marginRight: 18,
    top: 35,
    height: 47,
  },
  magentaButtonContainer: {
    backgroundColor: '#ca375e',
    borderRadius: 24,
    padding: 2,
    marginLeft: 18,
    marginRight: 18,
    bottom: 55,
    top: 5,
    height: 47,
  },
  textEmailInputContainer: {
    flexDirection:'row',
    backgroundColor: '#efefef',
    borderRadius: 4,
    padding: 2,
    marginLeft: 18,
    marginRight: 18,
    marginTop: 80,
    height: 48,
  },
  textPasswordInputContainer: {
    flexDirection:'row',
    backgroundColor: '#efefef',
    borderRadius: 4,
    padding: 2,
    marginLeft: 18,
    marginRight: 18,
    marginTop: 10,
    height: 48,
  },
  txtInput: {
    top: 0,
    height: 36,
    marginLeft: 24,
    fontSize: 18,
  },
});

请帮我解决这个问题。

还有一个问题，我想将“注册”按钮设置为55px的底部。但是无法实现，这是我们通过设置底部约束在iOS中实现的方式。也请让我知道任何解决方案。

Answer 1

尝试将overflow: 'hidden'添加到您的按钮样式：例如：

fbButtonContainer: {
    ...// your styles,
    overflow: 'hidden'
}

Answer 2

您可以针对Android设备分别使用Platform react native组件和样式。对于eaxmple：