react-native-router-flux 不路由

Question

我開始了一個新的 React Native 項目。 制作了一個目錄，作為其他“頁面”，如登錄等。 我在這里做了所有的事情： https : //github.com/aksonov/react-native-router-flux/blob/master/docs/MINI_TUTORIAL.md

但我都看到頂部是登錄標題。它不起作用，我不知道該怎么做。 以下是代碼：

索引.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

我認為導航欄可能位於Login視圖的內容之上。

嘗試將Text向下移動一點。

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

Answer 2

我想，您忘記創建一個減速器並將其傳遞給路由器。 這是我的配置 react-native-router-flux 在我的情況下檢查一下它就像一個魅力。

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>
        )
    }
}

初始組件（MainPage）的渲染功能看起來像這樣：

 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>
    )
}