Question

我的项目有两个组件，并且已经按照以下步骤完成了反应导航的所有步骤：

// App.js
import React from 'react';
import Main from './app/componenets/Main'
import details from './app/componenets/details'
import { createStackNavigator, createAppContainer } from 'react-navigation'

const mainNavigator = createStackNavigator(
  {
    MainScreen: Main,
    detailsScreen: details,
  },
  {
   initialRouteName :'MainScreen'
  }
);
const AppContainer = createAppContainer(mainNavigator);

export default class App extends React.Component{

render() {
return(
  <AppContainer />
);
}
}

然后我有Main.js，它具有以下方法：

    import React from 'react';
import {
    StyleSheet ,
     Text,
     View, 
    } from 'react-native'
import Note from './Note'
import detail from './details'
import { createStackNavigator, createAppContainer } from "react-navigation";


export default class Main extends React.Component {

  static navigationOptions = {
    title: 'To do list',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
  };

  constructor(props){
    super(props);
    this.state = {
      noteArray: [],
      noteText: ''
    }
  }

render() {
    let notes = this.state.noteArray.map((val,key) => {
      return <Note key={key} keyval={key} val={val}
      goToDetailPage= {() => this.goToNoteDetail(key)} />
    });
    const { navigation } = this.props;
    return(
        <View style={styles.container}>
            <View style={styles.footer}>
                <TextInput
                onChangeText={(noteText) => this.setState({noteText})}
                style={styles.textInput}
                placeholder='What is your next Task?'
                placeholderTextColor='white'
                underlineColorAndroid = 'transparent'
                >
                </TextInput>
            </View>
            <TouchableOpacity onPress={this.addNote.bind(this)} style={styles.addButton}>
                <Text style={styles.addButtonText}> + </Text>
            </TouchableOpacity>
        </View>
      );
    }
    //This method is declared in my Note.js
    goToNoteDetail=(key)=>{   
      this.props.navigation.navigate('detailsScreen')
      }
}

//我没有在此处发布简短代码的样式但是当我尝试进行导航时，出现此错误： '未定义不是对象（评估'this.props.val.date'）我需要以某种方式传递道具吗？还是我应该做其他事情？我是React Native的新手，感到困惑！

Answer 1

为了访问this.props在构造函数中使用箭头功能或绑定该功能。

goToDetail=()=>{   
this.props.navigation.navigate('detailsScreen')
}

Answer 2

只需删除createAppContainer

const AppContainer = mainNavigator;

告诉我您使用的react-navigation

未定义不是反应导航的对象

2 个答案: