web-dev-qa-db-ja.com

React Native、NavigatorIOS、undefinedはオブジェクトではありません（ 'this.props.navigator.Push'を評価しています）

NavigatorIOSを使おうとしているので、_index.ios.js_で次のようになりました。

_'use strict';

var React = require('react-native');
var Home = require('./App/Components/Home');

var {
  AppRegistry,
  StyleSheet,
  NavigatorIOS
} = React;

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

class ExampleApp extends React.Component{
  render() {
    return (
      <NavigatorIOS
        style={styles.container}
        initialRoute={{
          title: 'example',
          component: Home
        }} />
    );
  }
};

AppRegistry.registerComponent('exampleapp', () => ExampleApp);
module.exports = ExampleApp;
_

そして、_Home.js_で：

_'use strict';

var React = require('react-native');
var Park = require('./Park');

var {
  View,
  StyleSheet,
  Text,
  TouchableHighlight
} = React;

var styles = StyleSheet.create({
...
});

class Home extends React.Component{
  onPress() {
    this.props.navigator.Push({
      title: 'Routed!',
      component: Park
    });
  }

  render() {
    return (
      <View style={styles.mainContainer}>
        <Text> Testing React Native </Text>
        <TouchableHighlight onPress={this.onPress} style={styles.button}>
          <Text>Welcome to the NavigatorIOS . Press here!</Text>
        </TouchableHighlight>
      </View>
    );
  }
};

module.exports = Home;
_

私が抱えている問題は、TouchableHighlightトリガーonPress()をクリックすると、エラーが発生することです。

_"Error: undefined is not an object (evaluating 'this.props.navigator')
_

したがって、小道具からnavigatorを見つけることができないようですが、ナビゲーターはNavigatorIOSによって渡される必要がありますか？

また、Homeコンポーネントには画像のように_this.props.navigator_があるようです。

enter image description here

ヒントはありますか？

私はいくつかのリンクを見つけました（まったく同じ問題を抱えているがそれは役に立たなかった人々）：

javascriptiosreact-nativenavigator
8
manosim

ES6を使用しているので、「this」をバインドする必要があります。

例：onPress={this.onPress.bind(this)}

編集：私が最近使用しているさらに別の方法は、関数自体に矢印関数を使用することです。これらは自動的に外部のthisをバインドするからです。

onPress = () => {
  this.props.navigator.Push({
    title: 'Routed!',
    component: Park
  });
};
20
Dave Sibiski

constructorで関数をこれにバインドできます。

constructor(props) {
    super(props);
    this.onPress = this.onPress.bind(this);
}

次に、バインドせずにレンダリングするときに使用します。

render() {
    return (
        <TouchableHighlight onPress={this.onPress} style={styles.button}>
            <Text>Welcome to the NavigatorIOS. Press here!</Text>
        </TouchableHighlight>
    );
}

これには、複数回使用できるという利点があり、レンダリングメソッドをクリーンアップすることもできます。

1
Anil