react-native-router-flux不进行路由

Question

我开始了一个新的原生react项目。制作了一个目录，就像其他的“页面”一样，像登录一样。我在这里做了所有的事情：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

我认为navBar可能位于Login视图的内容之上。

试着把Text调低一点。

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

Answer 2

我猜，您忘记创建一个reducer并将其传递给路由器。这是我的配置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>
    )
}