0
ドキュメントとしてDrawerNavigatorを'react-navigation'に統合しました。しかし、私はプロジェクトを実行するときは、常にこのエラーを取得するときにボタンをクリックします：DrawerNavigatorを使用するとthis.props.navigationは定義されていません
TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')
をそして私は左から右にスワイプすると、何も開いて、何の引き出しを起こりません。
私はthis.propsをチェックしましたが、コンソールには常に{}のログが空です。 私は多くのソリューションを試しましたが、まだ動作していません。
calculator.js
export default class Calculator extends Component {
constructor(props) {
super(props);
}
static navigationOptions = {
drawerLabel: 'Calculator',
drawerIcon: ({ tintColor }) => (
<Image
source={require('./../../res/images/icon_calculator.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<View style={styles.container}>
<View>
<Text style={styles.title}>Tip Calculator</Text>
</View>
<Button
onPress={() => this.props.navigation.navigate("SettingsScreen")}
title="Go to settings"
/>
</View>
);
}
}
module.exports = Calculator;
settings.js
export default class Settings extends Component {
constructor(props) {
super(props);
}
static navigationOptions = {
drawerLabel: 'Settings',
drawerIcon: ({ tintColor }) => (
<Image
source={require('./../../res/images/icon_settings.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<View style={styles.container}>
<Text>Settings</Text>
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
</View>
);
}
}
module.exports = Settings;
navigation.js
import {
DrawerNavigator
} from 'react-navigation';
import Calculator from './../components/calculator/calculator.js';
import Settings from './../components/settings/settings.js';
const RootDrawer = DrawerNavigator({
CalculatorScreen: {
path: '/',
screen: Calculator
},
SettingsScreen: {
path: '/sent',
screen: Settings
}
}, {
initialRouteName: 'CalculatorScreen',
drawerPosition: 'left'
});
export default RootDrawer;
のApp.js
export default class App extends Component<{}> {
render() {
return (
<Calculator/>
);
}
}
index.js
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('rn_tip_calculator',() => App);
は私がDrawerNavigatorでStackNavigatorを使用する必要がありますか、または私はconfigに何かを逃したのですか？すべてのヘルプは理解されるであろうhttps://github.com/HCMUS-IceTeaViet-SE/rn_tip_calculator
：
完全なソースコードは、それだけの簡単なサンプルプロジェクトです、是非ご覧下さい。ありがとう！あなたがディスパッチAPIを使用することができます
あなたはアプリに「接続」していない、またはナビゲーションを搭載していないためです。アプリに渡されない前に、私はここで見つかったと誤解している... https：//github.com/HCMUS-IceTeaViet-SE/rn_tip_calculator/blob/master/app/powerranger.js ナビゲータあなたは25行目を通過し、小文字ですが、大文字ではないでしょうか？ –
@ GavinThomasだから、app.jsのAppコンポーネントの代わりにDrawerNavigatorを登録するためにAppRegistryを変更する必要がありますか？どうして？両方を登録するとどうなりますか？ – nhoxbypass
両方をレンダリングすることはできません。あなたは、あなたのアプリケーションをレンダリングし、RootDrawerをアプリケーションにインポートし、それを電卓に渡す必要があります。私は確かに明日見える！ –