javascript - 从另一个组件调用 navigation.navigate
问题描述
今天我花了 6 个小时试图解决这个问题,这是我最后的手段。
我想用反应导航切换屏幕。当所有屏幕都在同一个文件中时,它可以工作。但是当我将它们分成多个文件(每个屏幕1个文件)时,它给了我错误'未定义不是对象(评估'_this.props.navigation.navigate')
我已经尝试了很多东西。希望你能帮忙。这是代码。
应用程序.js ----------------------------------------------- ---
import 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator()
// PAGES
import LandingScreen from './src/landing';
import House from './src/house';
//CODE
function HomeScreen({navigation}) {
return(
<LandingScreen navigation={this.props.navigation}/>
);
}
function HouseScreen({navigation}) {
return(
<House navigation={this.props.navigation}/>
);
}
class App extends React.Component {
render(){
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen}/>
<Stack.Screen name="House" component={HouseScreen}/>
</Stack.Navigator>
</NavigationContainer>
)
}
}
const styles = {
}
export default App;
Landing.js ---------------------------------------------
import React from 'react';
import {View, Text, ImageBackground, TouchableOpacity, Image} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
//IMAGES
var myBackground = require('../assets/icons/lightblueBackground.png')
var buttonbannerlower = require('../assets/icons/buttonbannerlower.png')
var talkbuttonblue = require('../assets/icons/talkbuttonblue.png')
var gearIcon = require('../assets/icons/Gearicon.png')
var playIcon = require('../assets/icons/playicon.png')
var pointerIcon = require('../assets/icons/pointerIcon.png')
var houseIcon = require('../assets/icons/houseIcon.png')
//CODE
class Landing extends React.Component{
render(){
return (
<View style={styles.container}>
<View style={{flex: 0.2, flexDirection: 'row',}}>
<ImageBackground source={buttonbannerlower} style={styles.imageBackground}>
<TouchableOpacity>
<Image source={gearIcon} style={styles.iconsLeft}/>
</TouchableOpacity>
<TouchableOpacity>
<Image source={playIcon} style={styles.iconsLeft}/>
</TouchableOpacity>
<TouchableOpacity>
<Image source={talkbuttonblue} style={styles.blueButton}/>
</TouchableOpacity>
<TouchableOpacity>
<Image source={pointerIcon} style={styles.iconPointer}/>
</TouchableOpacity>
<TouchableOpacity onPress={() => props.navigation.navigate('House')}>
<Image source={houseIcon} style={styles.iconsRight}/>
</TouchableOpacity>
</ImageBackground>
</View>
<View style={{backgroundColor: 'green', flex: 0.2, alignItems: 'center',}}>
<Text>Hello</Text>
</View>
</View>
)
}
}
const styles = {
container: {
flex: 1,
flexDirection: 'column-reverse',
backgroundColor: '#ACE1EB'
},
imageBackground: {
width: '100%',
height: '100%',
flex: 1,
alignItems: 'flex-end',
flexDirection: 'row',
justifyContent: 'center',
alignContent: 'center',
},
blueButton: {
height: 110,
width: 110,
},
iconsLeft: {
marginRight: 20,
marginBottom: 10,
height: 40,
width: 40
},
iconsRight: {
marginLeft: 20,
marginBottom: 10,
height: 40,
width: 40
},
iconPointer: {
marginLeft: 20,
marginBottom: 10,
height: 40,
width: 40
},
}
export default Landing;
解决方案
您应该像这样添加屏幕组件:
import LandingScreen from './src/landing';
import House from './src/house';
class App extends React.Component {
render(){
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={LandingScreen}/>
<Stack.Screen name="House" component={House}/>
</Stack.Navigator>
</NavigationContainer>
)
}
}
还要在类组件中使用道具使用这个关键字:
<TouchableOpacity onPress={() => this.props.navigation.navigate('House')}>
还有一件事,要访问类组件中的道具,您可以像这样调用构造函数:
class Landing extends React.Component{
constructor(props) {
super(props);
}
render(){
return (
<View style={styles.container}>
<View style={{flex: 0.2, flexDirection: 'row',}}>
<ImageBackground source={buttonbannerlower} style={styles.imageBackground}>
<TouchableOpacity>
<Image source={gearIcon} style={styles.iconsLeft}/>
</TouchableOpacity>
<TouchableOpacity>
<Image source={playIcon} style={styles.iconsLeft}/>
</TouchableOpacity>
<TouchableOpacity>
<Image source={talkbuttonblue} style={styles.blueButton}/>
</TouchableOpacity>
<TouchableOpacity>
<Image source={pointerIcon} style={styles.iconPointer}/>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.props.navigation.navigate('House')}>
<Image source={houseIcon} style={styles.iconsRight}/>
</TouchableOpacity>
</ImageBackground>
</View>
<View style={{backgroundColor: 'green', flex: 0.2, alignItems: 'center',}}>
<Text>Hello</Text>
</View>
</View>
)
}
}
推荐阅读
- python-3.x - Python if 语句和赋值
- java - 将 char 数组转换为字符串。爪哇
- c - 加密小于 1Kbyte 的文件时出现段错误错误
- c# - 无法将“System.Int32”类型的对象转换为“System.Boolean”类型。
- java - 在 Cucumber 报告 (.html/.json) 文件中显示每个测试场景的时间戳(开始时间/结束时间)
- laravel - Laravel Chart 不呈现图表。未定义变量:图表
- java - 有 ac# 的“int”吗?java中的等价物?
- java - Java Lambda 未编译
- r - 使用 poly() 并将预测器设置为因子时,lm() 会中断
- html - 引导标头不可见