反応するネイティブルータのフラックスは流れません

Question

私は新しい反応ネイティブプロジェクトを開始しました。ログインなどのような他の "ページ"としてのディレクトリを作った。そして、私はここですべてを無条件でやりました：https://github.com/aksonov/react-native-router-flux/blob/master/docs/MINI_TUTORIAL.md

しかし、私はすべてtop.Itでのログインタイトルがうまくいかないと私は何をすべきか分からない。ここではコードです：

index.android.js

import React, { Component } from 'react'; 
import { AppRegistry, StyleSheet, Text, View } from 'react-native'; 
import { Actions, Scene, Router } from 'react-native-router-flux'; 

import Login from './components/Login'; 
import Home from './components/Home'; 


export default class Yeni extends Component { 
    render() { 
return (
    <Router> 
     <Scene key="root"> 
     <Scene key="login" component={Login} title="Login" initial={true} /> 
     <Scene key="home" component={Home} title="Home" /> 
     </Scene> 
    </Router> 
) 
    } 
} 



AppRegistry.registerComponent('Yeni',() => Yeni); 

コンポーネント/ Login.js

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

export default class Login extends Component { 
    render() { 
    return (
     <View> 
    <Text>Login page</Text> 
    </View> 
) 
} 
} 

Answer 1

私は推測するが、あなたは減速を作成して、ルータにそれを渡すのを忘れ。ここで私の設定は、反応ネイティブルータフラックスをチェックする私の場合は、それは魅力的なように動作しています。

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

render(){ 
    return (
     <View style={styles.container}> 
      <TouchableOpacity style={styles.button} 
        onPress={Actions.camera}> 
       <Text style={styles.buttonText}>Camera</Text> 
      </TouchableOpacity> 

      <TouchableOpacity style={styles.button} 
        onPress={Actions.gallery}> 
       <Text style={styles.buttonText}>Gallery</Text> 
      </TouchableOpacity> 

      <TouchableOpacity style={styles.button} 
        onPress={Actions.photoPreview}> 
       <Text style={styles.buttonText}>Test</Text> 
      </TouchableOpacity> 
     </View> 
    ) 
} 

Answer 2

私はナビゲーションバーがLoginビューの内容の上にあるかもしれないと思う：最初のコンポーネント（メインページ）の

import React, {Component} from 'react'; 
import {Router, Scene, Reducer} from 'react-native-router-flux'; 

import MainPage from './../nav/mainPage'; 
import CameraPage from './../nav/cameraPage'; 
import GalleryPage from './../nav/galleryPage'; 
import Photo from './../components/photo'; 
import PhotoPreview from './../components/photoPreview' 

const reducerCreate = params=> { 
    const defaultReducer = Reducer(params); 
    return (state, action)=> { 
     return defaultReducer(state, action); 
    } 
}; 

// define this based on the styles/dimensions you use 
const getSceneStyle = function (/* NavigationSceneRendererProps */ props, computedProps) { 
    const style = { 
     flex: 1, 
     shadowColor: null, 
     shadowOffset: null, 
     shadowOpacity: null, 
     shadowRadius: null 
    }; 

    if (computedProps.isActive) { 
     style.marginTop = computedProps.hideNavBar ? 0 : 64; 
    } 
    return style; 
}; 

export default class App extends Component { 
    render() { 
     return (
      <Router createReducer={reducerCreate} getSceneStyle={getSceneStyle}> 
       <Scene key="root"> 
        <Scene key="main" 
          component={MainPage} 
          title="Add Hat" 
          initial={true}/> 

        <Scene key="camera" 
          component={CameraPage} 
          title="Camera"/> 

        <Scene key="gallery" 
          component={GalleryPage} 
          title="Gallery"/> 

        <Scene key="photo" 
          component={Photo} 
          title="Photo"/> 

        <Scene key="photoPreview" 
          component={PhotoPreview} 
          title="Preview"/> 
       </Scene> 
      </Router> 
     ) 
    } 
} 

とレンダリング機能は、このように見えます。

少し遅くTextに移動してみてください。

export default class Login extends Component { 
    render() { 
     return (
      <View style={{flex: 1}}> 
       <Text style={{marginTop: 70}}>Login page</Text> 
      </View> 
     ) 
    } 
}