初めてのReactNativeメモ② コンポーメント、スタイル・画面遷移でエラーだらけ
View
UIを構築するための最も基本的なコンポーネント
UI は ユーザー インターフェイス（User Interface）の略です。Interfaceとは「接点、接触面」という意味で、 UI はユーザーと製品・サービスの接触面を指すので、「 ユーザー の目に触れる部分使用する部分」はすべて UI とみなすことができます。ホームページの場合、パソコンやスマートフォンに表示されるデザイン、 フォント など、製品であれば製品そのものや外観など、 ユーザー の視覚に触れる全ての情報が「 UI 」と呼ばれます。
UIとは？UXとは？違いを理解しよう！｜ferret [フェレット]
htmlでいう
みたいなやつ？文字は直接入れることはできない。
<View style = {styles.container}> <View style={{backgroundColor: 'blue', flex: 2}}> </View> <View style={{backgroundColor: 'red', flex: 3}}> </View> </View> const styles = StyleSheet.create({ container: { flex: 1, height: 100, padding: 20, }, });
文字を入れるには
Text
テキストを表示するためのReactコンポーネント。
<Text style={{color:'white'}}>Hello World!</Text>
代入？できる
constructor(props) { super(props); this.state = { titleText: "Bird's Nest", bodyText: 'This is not really a bird nest.' }; } <View style={{backgroundColor: 'red', flex: 3}}> <Text style={styles.baseText}> <Text style={styles.titleText} onPress={this.onPressTitle}> {this.state.titleText}{'\n'}{'\n'} </Text> <Text numberOfLines={5}> {this.state.bodyText} </Text> </Text> </View> baseText: { fontFamily: 'Cochin', }, titleText: { fontSize: 20, fontWeight: 'bold', }, container: { flex: 1, height: 100, padding: 20, },
改行
テンプレートリテラルを用いる
<Text> {` 1行目 2行目 `} </Text>
\nを{}で囲って用いる
<Text>1行目{"\n"}２行目</Text>
コンポーネントを分ける
<Text>1行目</Text> <Text>2行目</Text>
ページ遷移
react-navigation
npm install --save react-navigation
StackNavigator:
画面を積んでいくタイプのナビゲーター。Screen1 -> Screen2とかScreen1 -> Screen3とか画面を積んでツリーを作っていき、行きつ戻りつしていくという感じです。描画した画面内のコンポーネントを押したら別の画面に遷移させる、といったWebのリンクと同じようなケースで使う感じです。
TabNavigator:
タブタイプのナビゲーター。[Screen1、Screen2、Screen3]のように並列に画面を依存させずに扱い、切り替えていく感じです。画面遷移はTabNavigator自身が責任を持つ感じです。
DrawerNavigator:
ドロワータイプのナビゲーター。自分的にはタブが横なら、ドロワーは縦という程度の位置が違うくらいの認識です。ただ、タブに比べて登録できる画面数が多い(多くても比較的わかりにくくならない)ので、例えばユーザーによって画面数が変化するタイプのものであれば、これを使うのかなと思います。
import { StackNavigator } from 'react-navigation';
エラーが起こる
Unable to resolve "react-navigation" from "App.js"
しらべる
This error means that either you haven't installed the react-navigation module or that you have installed the module but didn't re-built your project using react-native run-android or react-native run-ios.
Following these steps should solve your issue:
Install react-navigation module.
Re-build your project.
Restart the packager by stopping the current packager and then starting the packager again with react-native start.Unable to resolve module 'react-navigation' - Stack Overflow
日本語訳
このエラーは、react-navigationモジュールをインストールしていないか、インストールしたのにプロジェクトを再構築していない、「react-native run-ios」「react-native run-android」を実行していない事を意味します。
次の手順に従って問題を解決してください。
react-navigationをインストール
プロジェクトを再構築
停止してから再度react-native start
やってみる。
できた！
チュートリアルを探してみる。
エラー！
(0 , _reactNativeNavigation.StackNavigator) is not a function
{ "dependencies": { "@expo/vector-icons": "6.2.1", "react-native-elements": "0.18.5", "react-navigation": "1.0.0-beta.27" } } "dependencies": { "react-navigation": "^3.3.0" },
バージョンの問題かな？
しらべる。
`react-native-navigation`ではなく `react-navigation`を使用する必要がある？
import { createStackNavigator, createAppContainer } from 'react-navigation';を使う必要がある？
facebook.github.io
を参考にやってみる！
import {createStackNavigator, createAppContainer} from 'react-navigation'; class HomeScreen extends React.Component { static navigationOptions = { title: 'ホームページ', }; render() { const {navigate} = this.props.navigation; return ( <View style= {{flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Button title="詳細ページへ" onPress={() => navigate('Detail')} /> </View> ); } } class DetailScreen extends React.Component { static navigationOptions = { title: '詳細ページ', }; render(){ return ( <View style= {{flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text> 詳細ページ </Text> </View> ); } } const MainNavigator = createStackNavigator({ Home: {screen: HomeScreen}, Detail: {screen: DetailScreen}, }); const App = createAppContainer(MainNavigator); export default App;
できた！これはうれしいww
大体はつかめてきたと思った！
Copyright 2019 Primeiro:プリメイロ All rights reserved.
