React Native Router Flux

balintd

私はネイティブに反応するのは初めてで、練習するアプリを作成しようとしています。ルーティング部分に到着しましたが、正常に動作していません。これで3つのコンポーネントができました。アプリ、ルーター、そしてゲームと呼ばれるもの。

私はルーティングにこれを持っています:

import React from 'react';
import { Scene, Router } from 'react-native-router-flux'
import { GameComponent } from './game'

const RouterComponent = () => {
   return (
       <Router>
           <Scene key="root">
               <Scene
                   key="game"
                   component={GameComponent}
                   title="New Game"
               />
           </Scene>
        </Router>
    );
 }
export default RouterComponent;

そしてこれはアプリで:

import { Actions } from 'react-native-router-flux';

export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>Basketball App</Text>
                <Button
                     onPress={() => Actions.game()}
                     title="New Game">
                </Button>
            </View>
        );
    }

しかし、次のエラーメッセージが表示されます。undefinedは関数ではありません。何が足りないのですか?

よろしくお願いします

oldanidavide

また、ルーターでホーム画面を定義する必要があります

GameComponentをインポートします

import GameComponent from './game';

ルーターを作成する

const RouterComponent = () => {
     return (
       <Router>
           <Scene key="root">
               <Scene key="home" component={Home} title="Home" />
               <Scene key="game" component={GameComponent} title="New Game" />
           </Scene>
        </Router>
      );
}

ホーム画面を作成する

class Home extends Component {
  render() {
    return (
      <View style={{flex:1}}>
          <Text>Basketball App</Text>
          <Button
               onPress={() => Actions.game() }
               title="New Game">
          </Button>
      </View>
    );
  }
}

メインアプリ

export default class App extends React.Component {
    render() {
        return (
            <RouterComponent />
        );
    }
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Is it possible to add custom buttons to NavBar in react-native-router-flux?

分類Dev

how to change color of Backbutton Arrow in react native router flux?

分類Dev

Protect routes (scenes) using React Native Router Flux/Redux

分類Dev

react-native-router-fluxとreact-native-drawerを組み合わせる方法

分類Dev

react-native-router-fluxを使用したカスタムnavBar

分類Dev

With react-native-router-flux, how can I have a tab bar click specify which tab to switch to?

分類Dev

同じシーンに移動するreact-native-router-flux

分類Dev

send data from screen to Tab screen using react-native-router-flux

分類Dev

react-native-router-flux、リロード時に状態を保持

分類Dev

react-native-router-fluxとGrid、Col、RowでScrollViewを使用する方法

分類Dev

react-native-flux-router で小道具を渡す

分類Dev

react-native-router-fluxまたはreact-router-nativeまたはreact-navigationのどちらを選択するか

分類Dev

react-native: react-native-router-flux と react-native-drawer を組み合わせる方法は?

分類Dev

react-native-router-flux-特定のルート負荷でのトリガー機能

分類Dev

React Native Router Flux / Reduxを使用してルート(シーン)を保護する

分類Dev

react-native-router-fluxのスタイルを設定する方法は?

分類Dev

react-native-router-fluxは小道具をシーンに渡します

分類Dev

componentWillMount()react-native-router-fluxでリダイレクトが機能しない

分類Dev

現在の画面を閉じて、react-native-router-fluxで別の画面を開く方法

分類Dev

React-native-router-fluxは複数のタップを防ぎます

分類Dev

サブシーンタブに移動します-react-native-router-flux

分類Dev

Actions.popTo(tabBarKey)はアプリを壊します。--React Native Router Flux

分類Dev

React Native + react-native-router-flux:hideNavBarを1つの<Scene />にのみ適用する方法は?

分類Dev

react-native-router -fluxによってreact-nativeの元の(前の)画面を更新する方法

分類Dev

React-Native-Router-Fluxの他のコンポーネントに値を渡す方法は?

分類Dev

React-Native-Router-Fluxの他のコンポーネントに値を渡す方法は?

分類Dev

React-Native-Router-Fluxの他のコンポーネントに値を渡す方法は?

分類Dev

React Native Router Flux:メインシーンから子にナビゲートする

分類Dev

react-native-router-fluxのNavBarにカスタムボタンを追加することは可能ですか?

Related 関連記事

  1. 1

    Is it possible to add custom buttons to NavBar in react-native-router-flux?

  2. 2

    how to change color of Backbutton Arrow in react native router flux?

  3. 3

    Protect routes (scenes) using React Native Router Flux/Redux

  4. 4

    react-native-router-fluxとreact-native-drawerを組み合わせる方法

  5. 5

    react-native-router-fluxを使用したカスタムnavBar

  6. 6

    With react-native-router-flux, how can I have a tab bar click specify which tab to switch to?

  7. 7

    同じシーンに移動するreact-native-router-flux

  8. 8

    send data from screen to Tab screen using react-native-router-flux

  9. 9

    react-native-router-flux、リロード時に状態を保持

  10. 10

    react-native-router-fluxとGrid、Col、RowでScrollViewを使用する方法

  11. 11

    react-native-flux-router で小道具を渡す

  12. 12

    react-native-router-fluxまたはreact-router-nativeまたはreact-navigationのどちらを選択するか

  13. 13

    react-native: react-native-router-flux と react-native-drawer を組み合わせる方法は?

  14. 14

    react-native-router-flux-特定のルート負荷でのトリガー機能

  15. 15

    React Native Router Flux / Reduxを使用してルート(シーン)を保護する

  16. 16

    react-native-router-fluxのスタイルを設定する方法は?

  17. 17

    react-native-router-fluxは小道具をシーンに渡します

  18. 18

    componentWillMount()react-native-router-fluxでリダイレクトが機能しない

  19. 19

    現在の画面を閉じて、react-native-router-fluxで別の画面を開く方法

  20. 20

    React-native-router-fluxは複数のタップを防ぎます

  21. 21

    サブシーンタブに移動します-react-native-router-flux

  22. 22

    Actions.popTo(tabBarKey)はアプリを壊します。--React Native Router Flux

  23. 23

    React Native + react-native-router-flux:hideNavBarを1つの<Scene />にのみ適用する方法は?

  24. 24

    react-native-router -fluxによってreact-nativeの元の(前の)画面を更新する方法

  25. 25

    React-Native-Router-Fluxの他のコンポーネントに値を渡す方法は?

  26. 26

    React-Native-Router-Fluxの他のコンポーネントに値を渡す方法は?

  27. 27

    React-Native-Router-Fluxの他のコンポーネントに値を渡す方法は?

  28. 28

    React Native Router Flux:メインシーンから子にナビゲートする

  29. 29

    react-native-router-fluxのNavBarにカスタムボタンを追加することは可能ですか?

ホットタグ

アーカイブ