3

反応ナビゲーションを起動して実行しようとしましたが、ナビゲーション項目を独自のコンポーネントに移動しようとすると問題が発生します。

HomeScreen.js

import React, { Component } from 'react';

import {
  StyleSheet,
  View,
  Text
} from 'react-native';

import NavButton from '../components/NavButton'

class HomeScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>
        Hello World
        </Text>

        <NavButton
        navigate={this.props.navigator}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});


export default HomeScreen;

次に、NavButton コンポーネントで、新しい画面に移動しようとします。

 class NavButton extends Component {
  render() {
    return (
      <View>
        <Button
        title="Go to About"
        onPress={() => this.props.navigator.navigate('About')}
        />
      </View>
    );
  }
}
export default NavButton;

しかし、「未定義のプロパティ 'navigate' を読み取れません。

これも私の Router.js ファイルです。

import React from 'react';
import {StackNavigator} from 'react-navigation';

import HomeScreen from '../screens/HomeScreen'
import AboutScreen from '../screens/AboutScreen'


export const AppNavigator = StackNavigator({
  Home: {
    screen: HomeScreen
  },
  About: {
    screen: AboutScreen
  }
})
4

4 に答える 4

7

navigate={this.props.navigator}名前をに変更するとnavigator={this.props.navigation}、NavButton で を呼び出しているため、機能するはずですthis.props.navigator.navigate。

于 2017-03-14T18:52:12.213 に答える