android - すべてのデバイスに対応する反応ネイティブで画面を設計する方法

Question

私はこのデザインをデザインしようとしていますreact-native。これは私がコード化したものですが、これは私が望むものではありません。これは 1 つの画面でのみ機能します。画面サイズを変更すると、機能しなくなります。

これは絶対レイアウトのように見えます。すべての画面サイズで動作するようにするには、どのような変更を加える必要がありますか。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import {
  AppRegistry,
  Image,
  View,
  Text,
  Button,
  StyleSheet
} from "react-native";

class SplashScreen extends Component {
  render() {
    console.disableYellowBox = true;
    return (
      <View style={styles.container}>
        <Image
          source={require("./img/talk_people.png")}
          style={{ width: 300, height: 300 }}
        />
        <Text style={{ fontSize: 22, textAlign: "center", marginTop: 30 }}>
          Never forget to stay in touch with the people that matter to you.
        </Text>
        <View style={{ marginTop: 60, width: 240 }}>
          <Button title="CONTINUE" color="#FE434C" />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#FFFFFF",
    margin: 50,
    alignItems: "center",
    flex: 1,
    flexDirection: "column"
  }
});

AppRegistry.registerComponent("Scheduled", () => SplashScreen);

予想される状態:

現在の状態：

ネクサス 4 - 768x1280

ネクサス 6P - 1440x2560