react-nativeプロジェクトの新規作成およびルーティング構成

木の経験のある初心者に捧げます.私が歩いた痛みをあなたが経験する必要がないことを望んで、私のすでにある幸福があなたが手に触れることができることを望みます.

一、プロジェクトの作成

インストール依存

まずnpmコンピュータを介してreact-natve-cli

をグローバルにインストールする

react-native init appname(appnameは新規作成するAPP名)

プロジェクトが新規作成され、react-native run-ios--simulator'iPhone X'がシミュレータで実行されます.

二、ルート構成

インストール依存

npm install react-navigation --save

npm install react-native-gesture-handler --save

npm i react-native-vector-icons--save(後で下部ナビゲーションを構成する場合に使用)

リンク依存

react-native link react-native-gesture-handler

react-native link react-native-vector-icons

三、コード

まずルートディレクトリの下にプロジェクトフォルダ

を新規作成する

プロジェクトフォルダの下に新しいnavigationフォルダを作成ページルーティング構成を保存する新しいpagesフォルダを作成ページファイル

を保存する

navigationフォルダの下にindexを新規作成します.jsファイル、書き込みルーティング構成、index.jsコードは以下の

import React, { Component } from 'react'
import {
  createStackNavigator,
  createAppContainer,
  createBottomTabNavigator,
} from 'react-navigation'
import Ionicons from 'react-native-vector-icons/Ionicons'

import {
  Login,
  PhoneLogin,
} from '../pages/index'

const SketchRouter = createStackNavigator(
  {
    Login: {
      screen: Login,
      navigationOptions: ({ navigation }) => ({
        header: null
      }),
    },
    PhoneLogin: {
      screen: PhoneLogin,
      navigationOptions: ({ navigation }) => ({
        header: null
      }),
    },
  },
  
  {
    headerBackTitleVisible: false,
  }
)

export default createAppContainer(SketchRouter)

pagesフォルダの下に3つのjsファイルを新規作成

Login.js(本プロジェクトのトップページ)、コードは以下の

import React from "react";
import {
  View,
  Text,
  StyleSheet,
  StatusBar,
  TouchableOpacity,
} from "react-native";
import { SafeAreaView } from "react-navigation";
import Images from "../images/index";
import { scaleSizeH, scaleSizeW } from "../size/index";
export default class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     
    };
  }
  render() {
    return (
      
        
        {this.props.navigation.navigate('PhoneLogin')}} style={styles.test}>
              
        
      
    );
  }
}
const styles = StyleSheet.create({
  contaner: {
    backgroundColor: "#fff",
    flex: 1,
    justifyContent:'center',
    alignItems: 'center',
  },
  test:{
    width: 150,
    height: 150,
    justifyContent:'center',
    alignItems: 'center',
    backgroundColor: '#0f0',
  },
});

PhoneLogin.js、コードは以下の

import React from "react";
import {
  View,
  Text,
  StyleSheet,
  StatusBar,
  TouchableOpacity,
} from "react-native";
import { SafeAreaView } from "react-navigation";
import Images from "../images/index";
import { scaleSizeH, scaleSizeW } from "../size/index";

export default class PhoneLogin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     
    };
  }
  render() {
    return (
      
        
        {this.props.navigation.navigate('Login')}} style={styles.test}>
              
        
      
    );
  }
}
const styles = StyleSheet.create({
  contaner: {
    backgroundColor: "#fff",
    flex: 1,
    justifyContent:'center',
    alignItems: 'center',
  },
  test:{
    width: 150,
    height: 150,
    justifyContent:'center',
    alignItems: 'center',
    backgroundColor: '#f00',
  },
});

index.jsコードは以下の

import Login from './Login'
import PhoneLogin from './PhoneLogin'

export {
  Login,
  PhoneLogin,
}

四、Appを修正する。jsファイル、コードは以下の通りです

import React, { Component } from 'react'
import { Platform, StyleSheet, } from 'react-native'
import SketchRouter from './project/navigation/index'

export default class App extends Component {
  render () {
    console.disableYellowBox = true
    return (
        
    )
  }
}

const styles = StyleSheet.create({
  container: {
    width: 200,
    height: 300,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

五、run起きろ!

react-native run-ios--simulator'iPhone X'iPhone Xは任意の機種のアップル

に交換できます
最初にreact-nativeに接触したとき、小さなルートは3日間も死んでいたと思います.当時、ネット上で配置を指導してくれるチュートリアルが見つかりませんでした.その時、会社に来たばかりで実習していたので、私たちは聞く勇気がありませんでした.時間が経つにつれて、知識が高まり、顔も厚くなり、おかず鳥として書くことができました.