javascript - 错误 : Cannot read property 'push' of undefined React Native

Question

我目前正在尝试根据本教程学习 React Native:http://www.appcoda.com/react-native-introduction/

在复制大部分代码(文本中的小改动)时出现此错误:

Error: Cannot read property 'push' of undefined

如果我尝试推送新的导航器 View ，则会发生此错误。这是精简代码(完整代码在最后，但认为这里只有一个简短的版本更具可读性):

<TouchableHighlight onPress={() => this._rowPressed(eve)} >



    _rowPressed(eve) {
  this.props.navigator.push({
    title: "Property",
    component: SingleEvent,
    passProps: {eve}
  });
}

也许有人可以向我解释为什么 this.props.navigator 未定义以及我如何使用它。对于这个基本问题，我很抱歉，但我搜索了很多，但还没有找到这个问题的答案。我尝试将 .bind(this) 绑定(bind)到 _rowPressed 函数，并将所有内容重写到 NavigatorIOS View ，但还没有任何效果。

如果有人能向我解释一下就好了。

一切顺利丹尼尔

完整错误报告:

Error: Cannot read property 'push' of undefined
 stack: 
  Dates._rowPressed                                      index.ios.bundle:52051
  Object._createClass.value.React.createElement.onPress  index.ios.bundle:52033
  React.createClass.touchableHandlePress                 index.ios.bundle:41620
  TouchableMixin._performSideEffectsForTransition        index.ios.bundle:39722
  TouchableMixin._receiveSignal                          index.ios.bundle:39640
  TouchableMixin.touchableHandleResponderRelease         index.ios.bundle:39443
  executeDispatch                                        index.ios.bundle:15431
  forEachEventDispatch                                   index.ios.bundle:15419
  Object.executeDispatchesInOrder                        index.ios.bundle:15440
  executeDispatchesAndRelease                            index.ios.bundle:14793
 URL: undefined
 line: undefined
 message: Cannot read property 'push' of undefined

通过 TabBarIOS 包含在主视图中的父 View 代码:

    'use strict';

var React = require('react-native');
var singleEvent = require('./singleEvent');
var REQUEST_URL = 'http://***/dates/24-09-2015.json';



var {
    Image,
    StyleSheet,
    Text,
    View,
    Component,
    ListView,
    NavigatorIOS,
    TouchableHighlight,
    TabBarIOS,
    ActivityIndicatorIOS
} = React;


var styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        padding: 10
    },
    thumbnail: {
        width: 53,
        height: 81,
        marginRight: 10
    },
    rightContainer: {
        flex: 1
    },
    title: {
        fontSize: 16,
        marginBottom: 8
    },
    author: {
        color: '#656565',
        fontSize: 12
    },
    separator: {
       height: 1,
       backgroundColor: '#dddddd'
   },
   listView: {
       backgroundColor: '#F5FCFF'
   },
   loading: {
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center'
   }   
});

class Dates extends Component {

  constructor(props) {
      super(props);

      this.state = {
        isLoading: true,
        dataSource: new ListView.DataSource({
           rowHasChanged: (row1, row2) => row1 !== row2
        })
      };
    }


    componentDidMount() {
       this.fetchData();
    }

    fetchData() {
       fetch(REQUEST_URL)
       .then((response) => response.json())
       .then((responseData) => {
           this.setState({
               dataSource: this.state.dataSource.cloneWithRows(responseData),
               isLoading: false
           });
       })
       .done();
    }

      render() {
       if (this.state.isLoading) {
           return this.renderLoadingView();
       }

       return (
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderEvent.bind(this)}
                style={styles.listView}
                />
        );
      }  
    renderLoadingView() {
        return (
            <View style={styles.loading}>
                <ActivityIndicatorIOS size='large'/>
                <Text>Loading Events...</Text>
            </View>
        );
    }

    renderEvent(eve) {
       return (
            <TouchableHighlight onPress={() => this._rowPressed(eve).bind(this)}  underlayColor='#dddddd'>
                <View>
                    <View style={styles.container}>
                        <View style={styles.rightContainer}>
                            <Text style={styles.title}>{eve.value.name}</Text>
                            <Text style={styles.author}>{eve.value.location}</Text>
                        </View>
                    </View>
                    <View style={styles.separator} />
                </View>
            </TouchableHighlight>
       );
    }

    _rowPressed(eve) {

      console.log(eve, this.props);

      this.props.navigator.push({
        title: "Property",
        component: SingleEvent,
        passProps: {eve}
      });
    }
}
module.exports = Dates;

单击 ListView 时应包括的单个 View :

'use strict';

var React = require('react-native');

var {
  StyleSheet,
  Text,
  TextInput,
  View,
  TouchableHighlight,
  ActivityIndicatorIOS,
  Image,
  Component
} = React;

var styles = StyleSheet.create({
    description: {
        fontSize: 16,
        backgroundColor: 'white'
    },
    title : {
        fontSize : 22
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
});

class SingleEvent extends Component {
    render() {
        var eve = this.props.eve;
        var description = (typeof eve.value.description !== 'undefined') ? eve.value.description : '';
        return (
            <View style={styles.container}>
                <Text style={styles.title}>{eve.value.name}</Text>
                <Text style={styles.description}>{description}</Text>
            </View>
        );
    }
}

module.exports = SingleEvent;

index.ios.js，其中所有 View 合并:

'use strict';

var React       = require('react-native');
var Dates       = require('./Dates');
//var Eventlist       = require('./eventlist');
var NearYou     = require('./NearYou');

var icons         = [];
icons['place']    = require('image!ic_place_18pt');
icons['reorder']  = require('image!ic_reorder_18pt');
icons['grade']    = require('image!ic_grade_18pt');
icons['people']   = require('image!ic_group_18pt');

var {
    Image,
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView, 
    TouchableHighlight,
    TabBarIOS,
    Component
} = React;

class allNightClub extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'dates'
        };
    }

    render() {
        return (
            <TabBarIOS selectedTab={this.state.selectedTab}>
                <TabBarIOS.Item
                    selected={this.state.selectedTab === 'dates'}
                    icon={icons['reorder']}
                    title= 'Events'
                    onPress={() => {
                        this.setState({
                            selectedTab: 'dates'
                        });
                    }}>
                    <Dates navigator={navigator} />
                </TabBarIOS.Item>
               <TabBarIOS.Item
                    selected={this.state.selectedTab === 'nearyou'}
                    title= 'Favorites'
                    icon={icons['grade']}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'nearyou'
                        });
                    }}>
                    <NearYou navigator={navigator} />
                </TabBarIOS.Item>
                <TabBarIOS.Item
                    selected={this.state.selectedTab === 'nearyou'}
                    title= 'Near You'
                    icon={icons['place']}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'nearyou'
                        });
                    }}>
                    <NearYou navigator={navigator} />
                </TabBarIOS.Item> 
                <TabBarIOS.Item
                    selected={this.state.selectedTab === 'nearyou'}
                    title= 'People'
                    icon={icons['people']}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'nearyou'
                        });
                    }}>
                    <NearYou navigator={navigator} />
                </TabBarIOS.Item> 
            </TabBarIOS>
        );
    }
}

AppRegistry.registerComponent('allNightClub', () => allNightClub);

Answer 1

在您的 index.ios.js 中，您在此处引用了一个当时未设置的导航器。

<Dates navigator={navigator} />

因此，据我所知，您必须选择使用 NavigatorIOS 的选项:

<强>1。 NavigatorIOS 作为 Tab 的子项

您需要将导航器定义为 TabViewItems 的子项，它本身会加载适当的 View :

var styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

<TabBarIOS.Item>
<NavigatorIOS
    style={styles.container}
    initialRoute={{
        title: 'Dates',
        component: Dates,
    }}
/>
</TabBarIOS.Item>

<强>2。 NavigatorIOS 作为根元素

class allNightClub extends Component {

  render() {
        return (
            <NavigatorIOS
                style={styles.container}
                initialRoute={{
                  title: 'Index',
                  component: Index
                }}
            />
        );
    }
}

这就是它为我工作的方式。我将原来的index.ios.js代码放到了Index.js中，同时做了如下改动:

Index.js

<Dates
    navigator={this.props.navigator}
/>

Dates.js

<TouchableHighlight onPress={() => this._rowPressed(eve)}  underlayColor='#dddddd'>