質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

426閲覧

React Navigationでモーダルを出したい(react native)

yamady

総合スコア176

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/02/25 08:04

編集2018/02/26 11:29

こちらの記事(https://qiita.com/nostrict/items/4002049896117cf21492)にありますように、React Navigationを使ってモーダルで出すものと、カードで出すものを分けたいと考えています。

こちらに書いてある通りにやったのですが、押しても"何も反応しない"という状態となっています。
スクリーン自体は存在しており、機能しているスクリーンと変えてやってみたのですができなかったので、ここのルーティングがミスしていると考えています。
すみませんが、お力添えください。

Router.js

JavaScript

1import React from 'react'; 2import { StyleSheet } from 'react-native'; 3import { StackNavigator, TabBarBottom, TabNavigator } from 'react-navigation'; 4 5import LoggedInHome from './LoggedInHome'; 6import Profile from './Profile'; 7import Notification from './Notification'; 8import Main from './Main'; 9import Information from './Information'; 10import AuthScreen from './AuthScreen'; 11 12type TabBarIcon = { 13 tintColor: string, 14}; 15 16const styles = StyleSheet.create({ 17 icon: { 18 fontSize: 30, 19 }, 20}); 21 22const HomeStack = StackNavigator({ 23 LoggedInHome: { 24 screen: LoggedInHome, 25 navigationOptions: { 26 headerStyle: { 27 backgroundColor: Theme.PRIMARY, 28 }, 29 headerTitleStyle: { 30 color: '#fff', 31 fontWeight: 'bold' 32 } 33 } 34 }, 35 Notification: { screen: Notification }, 36 Profile: { screen: Profile }, 37 Information: { screen: Information }, 38}); 39 40const MainStack = StackNavigator({ 41 HomeStack: { screen: HomeStack }, 42 Main: { screen: Main }, 43}, { 44 initialRouteName: 'HomeStack', 45 mode: 'modal', 46 headerMode: 'none', 47}); 48 49export default StackNavigator({ 50 Tabs: { screen: HomeStack }, 51 Auth: { screen: AuthScreen }, 52}, { 53 cardStyle: { 54 backgroundColor: 'transparent', 55 opacity: 1, 56 }, 57 headerMode: 'none', 58 initialRouteName: 'Tabs', 59 mode: 'modal', 60});

LoggedInHome.js

JavaScript

1・・・ 2 <Button 3 onPress={() => this.props.navigation.navigate('Main')} 4 /> 5・・・

MainのところをMainStackとしてみましたが、やはり同じように動きませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

JavaScript

1export default StackNavigator({ 2 Tabs: { screen: HomeStack }, 3 Auth: { screen: AuthScreen }, 4},

ここのscreenがHomeStackではなく、

JavaScript

1export default StackNavigator({ 2 Tabs: { screen: MainStack }, 3 Auth: { screen: AuthScreen }, 4},

MainStackにしたら普通に通りました。納得!

投稿2018/02/27 13:11

yamady

総合スコア176

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問