如何修复具有不同尺寸的设备的设计

Question

我的代码和（Genymotion模拟器）截图如下。屏幕看起来与使用相同的代码不同。例如，Galaxy S2屏幕上的REGISTER按钮与Galaxy S3屏幕似乎不相同。

其中一个屏幕截图来自Galaxy S2，另一个来自Galaxy S3。

是否有机会修复具有不同尺寸和分辨率的设备的屏幕布局？

修改

（我已经取代了以前的代码和schreenshots）

export default class Login extends Component {
    constructor(props) {
        super(props)
    }

    render() {

        return (
            <View style={styles.container}>
                <Image source={require('./image.png')} style={styles.topImage} resizeMode={'contain'} />
                <View style={styles.form}>
                    <TextInput style={styles.textInput} placeholder={'Username'} />
                    <TextInput style={styles.textInput} placeholder={'Password'} />
                    <RaisedButton
                        style={{marginTop: 16, alignSelf:'stretch' }}
                        text='LOGIN'
                        color={'accent'}
                        onPress={() => alert('Login has been pressed!')}
                    />
                    <View style={styles.lastContainer}>
                        <RaisedButton
                            style={{marginTop: 36, alignSelf:'stretch' }}
                            text='FORGOT PASSWORD'
                            onPress={() => alert('Forgot Password has been pressed!')}
                        />
                        <RaisedButton
                            style={{marginTop: 16, alignSelf:'stretch' }}
                            text='REGISTER'
                            color={'accent'}
                            onPress={() => alert('Register has been pressed!')}
                        />
                    </View>
                </View>
            </View>
        )
    }
}

let styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        padding: 10,
    },
    topImage: {
        flex: 0.4,
        height: null,
        width: null,
        marginLeft: 55,
        marginRight: 55,
    },
    form: {
        flex: 1
    },
    lastContainer: {
        marginTop: 25,
    },
    textInput: {
        fontSize: 16,
        lineHeight: 48,
    },
})

Answer 1

您可以使用此插件https://www.npmjs.com/package/react-native-device-display。我个人使用Display.height来调整高度。

Answer 2

我认为您可以使用flex {1的空<View>将按钮拉到屏幕底部：

  <View style={{flex: 1}}></View> <!-- empty spacer view -->
  <View style={styles.lastContainer}>
    <RaisedButton
      style={{marginTop: 36, alignSelf:'stretch' }}
      text='FORGOT PASSWORD'
      onPress={() => alert('Forgot Password has been pressed!')}
    />
    <RaisedButton
      style={{marginTop: 16, alignSelf:'stretch' }}
      text='REGISTER'
      color={'accent'}
      onPress={() => alert('Register has been pressed!')}
    />
  </View>

或者，您可以查看允许在样式中使用百分比值的react-native-extended-stylesheet。