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

Question

我是 ReactNative 的新手。我已经在 React Native 中实现了一个 UI，它在 iOS 中工作正常但是在 Android[= 的情况下33=]，它在按钮上方显示一些白色 space。请查看以下屏幕截图。

这是我正在使用的代码：

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,
  },
});

请帮我解决这个问题。

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

Answer 1

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

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

Answer 2

您可以为 android 设备单独使用 Platform React Native 组件和样式。 例如：

import { Platform } from 'react-native';

这是我的输入框设计，我需要为 iOS 和 android 使用不同的高度，所以我使用了以下代码：

这是我的文本字段编码

<TextInput
                    keyboardType='email-address'
                    style = {styles.inputBox}
                    placeholder="Email Address"
                    placeholderTextColor="#333"
                    onChangeText = {fbEmail => this.setState({fbEmail})}
                  />

这是文本字段的样式。

const styles = StyleSheet.create({
    inputBox:{
        width:width*0.65 ,
        borderBottomColor: 'grey',
        borderBottomWidth: 1,
        height:Platform.OS === 'ios' ? 24 : height/15,
        fontSize:16,
        color:'#333',
        marginVertical:10,
        paddingLeft: 5
      }
});

Answer 3

Button UI 组件的样式在 android 和 ios 中有所不同。您可以使用可触摸的不透明度创建自定义按钮，并根据需要应用样式。

示例

<View>
  <TouchableOpacity style={styles.submitContainer} >
     <Text style={styles.submitText}>POST DISH</Text>
  </TouchableOpacity>
</View>

Css风格

const styles = StyleSheet.create({
   submitContainer:{
        flexDirection:'row',
        backgroundColor:'#f7aa97',
        width:'100%',
        height:40,
        alignItems:'center',
        justifyContent:'center',
    }
})