Question

我是新的反应原生我使用expo app运行我的代码我没有索引文件，如其他问题所解释的我所有的文件都是app.js，login.js，router.js，home.js和我的申请流程应该像这样登录＆gt;点击按钮＆gt;家但点击按钮我收到错误未定义不是一个对象（评估'this.props.navigation'），请帮我，我哪里出错了。提前致谢。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Login from './containers/Login/Login';
import {Navigate} from './containers/Navigation/Router';
import { AppRegistry } from 'react-native';

export default class App extends React.Component {
  render() {
    return (<Login navigation={this.props.navigation}/>);
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

import React from 'react';
import { StyleSheet, Text,TextInput,Button,Image, View } from 'react-native';
import Navigate from '../Navigation/Router';
import RNChart from 'react-native-chart';

export default class Login extends React.Component{
  static navigationOptions = {
    title:'Login',
  };

  render() {
    const navigate  = this.props.navigation;
    return (
      <View style={styles.container}>
      <RNChart style={styles.chart}
                    chartData={chartData}
                    verticalGridStep={5}
                    type="bar"
                    xLabels={xLabels}>
                </RNChart>
      <Image
          source={require('../../NCS.png')}
        />
        <TextInput
          style={styles.textInput}
          placeholder="Username"
        />
        <TextInput
          style={styles.textInput}
          placeholder="Password"
          secureTextEntry= {true}
        />
        <Button
          onPress={this._handlePress}
          title="Login"
          color="#0086b3"
        />
      </View>
    );
  }

  _handlePress(event) {
      //navigate('Home')
      this.props.navigation.navigate('Home', {name: 'Home'})
  }

}

var chartData = [
    {
        name:'BarChart',
        type:'bar',
        color:'purple',
        widthPercent:0.6,
        data:[
            30, 1, 1, 2, 3, 5, 21, 13, 21, 34, 55, 30
        ]
    },
    {
        name:'LineChart',
        color:'gray',
        lineWidth:2,
        showDataPoint:false,
        data:[
            10, 12, 14, 25, 31, 52, 41, 31, 52, 66, 22, 11
        ]
    }
];
 
var xLabels = ['0','1','2','3','4','5','6','7','8','9','10','11'];

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },

  textInput: {
    padding: 10,
    width: 200,
  },

  chart: {
        position: 'absolute', top: 16, left: 4, bottom: 4,right: 16
  }
});

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {Navigate} from '../Navigation/Router';

export default class Home extends React.Component {
  static navigationOptions = {
    title:'Home',
  };

  render() {
    return (
      <View style={styles.container}>
        <Text> Work under progress</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {StackNavigator} from 'react-navigation';
import Login from '../Login/Login';
import Home from '../Home/Home';

export default Navigate = StackNavigator({
  Home: { screen: Home, },
});

Answer 1

问题是React Navigation没有像@Eden提到的那样连接到您的App组件。您在App中返回的组件需要是您的StackNavigator。

这是一个非常好的教程，用TabNavigator显示这个 https://hackernoon.com/getting-started-with-react-navigation-the-navigation-solution-for-react-native-ea3f4bd786a4

反应导航给出错误undefined不是一个对象（评估'this.props.navigation'）

1 个答案: