javascript - react-native-router-flux 没有路由

Question

我开始了一个新的反应原生项目。制作了一个目录，该目录作为其他“页面”，如登录等。我在这里做了所有事情：https ://github.com/aksonov/react-native-router-flux/blob/master/docs/MINI_TUTORIAL.md

但我都看到顶部的登录标题。它只是不起作用，我不知道该怎么做。以下是代码：

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

我认为导航栏可能位于视图内容之上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>
    )
}