Question

我最近开始学习React-Native，我试图在我的一个项目中实现React-Navigation V2，但似乎不起作用。该项目还使用Redux和其他依赖项以及Expo安装的核心。

这是用于管理导航的路由器组件的代码：

import { createStackNavigator } from 'react-navigation';
import Movie from './Movie';
import Home from './Home';

const RoutRouter = createStackNavigator({
  Movie : {
    screen : Movie
  },
  Home : {
    screen : Home
  }
}, {
  initialRouteName : 'Home'
});

export default RoutRouter;

家庭组件

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

class Home extends Component {

  render() {
    console.log('Home screen');
    return (
      <View>
        <Text>HOME</Text>
      </View>
    );
  }
}

export default Home;

电影组件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { View, Text, Button } from 'react-native';
import { apiRequest } from '../actions';
import { MOVIE } from '../constants';


class Movie extends Component {

  //api request to retrieve data
  getData = () => {
    console.log('Button works!');
  }

  render() {
    console.log('Movie screen');
    return ( 
      <View>
        <Text>MOVIE</Text>
        <Button title = 'Get Movie' onPress = {()=> {this.getData()}} />
      </View>
    );
  }
}

const mapStateToProps = (state) => {
  return{
    state : state
  }
}

export default connect(mapStateToProps, {apiRequest})(Movie);

主要组件

import React from 'react';
import { Provider } from 'react-redux';
import { StyleSheet, Text, View, Button, SafeAreaView } from 'react-native';
import store from './src/store';
import RootRouter from './src/routes/Router';
import { Constants } from 'expo';

console.ignoredYellowBox = ['Remote debugger'];

export default class App extends React.Component {
  render() {
    console.log('stae');
    return (
      <Provider store = { store }>
        <SafeAreaView>
          <View style={styles.container}>
            <RootRouter />
          </View>
        </SafeAreaView>
      </Provider>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: Constants.statusBarHeight,
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

这是我的package.json

{
  "name": "m",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "jest-expo": "~27.0.0",
    "react-native-scripts": "1.14.0",
    "react-test-renderer": "16.3.1"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "jest"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "expo": "^27.0.1",
    "react": "16.3.1",
    "react-native": "~0.55.2",
    "react-navigation": "^2.11.2",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0"
  }
}

起初我以为我出错了，但是当我注销屏幕时，我注意到在调试器上显示了屏幕消息，但屏幕空白。

知道我想念什么吗？

React Navigation V2不显示栏，React Native

0 个答案: