ReactNative: Hello World と iOS / Android のファイル共通化

画像表示 + Hello world しつつ、iOS と Android 用のファイル共通化をしてみます。

といっても前者はすでにプロジェクトを作成した直後のファイルに Image タグを使うだけなのと、後者は App.js を作成して、index.ios.js と index.android.js から呼び出すだけです。

index.ios.js / index.android.js

import './App';

App.js

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

const styles = StyleSheet.create({
  logoContainer: {
    backgroundColor: "#ffffff",
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  logo: {
    width: 100,
    height: 100,
  },
  logoLabel: {
    paddingTop: 10,
    fontSize: 24,
    fontFamily: 'System',
    fontWeight: "700",
  }
});

class App extends Component {
  constructor() {
    super();

    this.state = {
    };
  }

  render() {
    return (
      <View style={styles.logoContainer}>
        <Image
          style={styles.logo}
          source={require('./src/assets/logo.png')}
        />
        <Text style={styles.logoLabel}>Project Name</Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('ProjectName', () => App);