javascript - 单击文本时尝试更改屏幕,但意外出现“;” 改为错误
问题描述
嘿,我一直在测试不同的方法来尝试通过单击图像导航到另一个页面,所以我一直在测试一个模型(此代码),以便能够通过单击文本导航到“AddDocScreen”但它给了我一个错误。任何人都可以帮忙吗
这是错误:
Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(SyntaxError: /Users/camillebasbous/Project/App.js: Unexpected token, expected ";" (30:27)
[0m [90m 28 | [39m[0m
[0m [90m 29 | [39m [0m
[0m[31m[1m>[22m[39m[90m 30 | [39m navigateToScreen () [33m=>[39m () [33m=>[39m {[0m
[0m [90m | [39m [31m[1m^[22m[39m[0m
[0m [90m 31 | [39m [0m
[0m [90m 32 | [39m [36mconst[39m navigationAction [33m=[39m [33mNavigationActions[39m[33m.[39mnavigate({[0m
[0m [90m 33 | [39m routeName[33m:[39m [32m'AddDocSreen'[39m[33m,[39m[0m (null))
__38-[RCTCxxBridge loadSource:onProgress:]_block_invoke.228
RCTCxxBridge.mm:414
___ZL36attemptAsynchronousLoadOfBundleAtURLP5NSURLU13block_pointerFvP18RCTLoadingProgressEU13block_pointerFvP7NSErrorP9RCTSourceE_block_invoke.118
__80-[RCTMultipartDataTask URLSession:streamTask:didBecomeInputStream:outputStream:]_block_invoke
-[RCTMultipartStreamReader emitChunk:headers:callback:done:]
-[RCTMultipartStreamReader readAllPartsWithCompletionCallback:progressCallback:]
-[RCTMultipartDataTask URLSession:streamTask:didBecomeInputStream:outputStream:]
__88-[NSURLSession delegate_streamTask:didBecomeInputStream:outputStream:completionHandler:]_block_invoke
__NSBLOCKOPERATION_IS_CALLING_OUT_TO_A_BLOCK__
-[NSBlockOperation main]
-[__NSOperationInternal _start:]
__NSOQSchedule_f
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_continuation_pop
_dispatch_async_redirect_invoke
_dispatch_root_queue_drain
_dispatch_worker_thread2
_pthread_wqthread
start_wqthread
这是样机代码:
import React from 'react';
import {AppRegistry, StyleSheet, View, Image, TouchableOpacity, Text} from "react-native" ;
import { createAppContainer, createStackNavigator, StackActions, NavigationActions, navigateToScreen } from 'react-navigation'; // Version can be specified in package.json
import AddDocScreen from './Menu/AddDocScreen'
export default class Mock extends React.Component{
render(){
return(
<View style={styles.container}>
<TouchableOpacity
onPress={ this.navigateToScreen('AddDocScreen') }>
<View><Text>Click Me</Text></View>
</TouchableOpacity>
</View>
)
}
}
navigateToScreen () => () => {
const navigationAction = NavigationActions.navigate({
routeName: 'AddDocSreen',
})
this.props.navigation.dispatch(navigationAction)
}
const doc = createStackNavigator({
AddDocScreen: {screen: AddDocScreen},
});
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'rgba(215,215,215,1)',
alignItems: 'center',
justifyContent: 'center',
},
解决方案
看起来你错过了一个分号:
import AddDocScreen from './Menu/AddDocScreen'
此外,请确保在return
语句中添加分号。为了将来参考,错误本身会告诉您语法错误的问题所在。
Unexpected token, expected ";" (30:27)
这意味着您错过了第 30 行第 27 个字符的分号。由于无法查看您的行号,我无法确定这是(唯一)位置,但只需查看行尾即可了解分号在哪里失踪。
编辑:另外,再次查看您的代码,发现另一个错误:
onPress={ this.navigateToScreen('AddDocScreen') }>
应该
onPress={ () => this.navigateToScreen('AddDocScreen') }>
编辑编辑:(我真的很讨厌无法添加评论)你提到navigateToScreen () => () => {
的是错误。那讲得通。我为之前错过它而道歉!在 React Native 中,您希望方法签名看起来像
navigateToScreen() {
... code ...
}
你目前做的方式几乎是 ES6(那就是function = () => {};
),但不是 React Native。您可以在本教程页面上看到一个示例。请注意该方法的外观
_onPressButton() {
Alert.alert('You tapped the button!')
}
推荐阅读
- javascript - WebDriverError:元素点击被拦截:其他元素将接收点击 - 检测
- node.js - Node.js 应用程序未通过 nginx 反向代理打开(不同端口上的多个应用程序)
- selenium-webdriver - 使用代理自动到 Instagram 注册页面
- laravel - 在 hasMany-relationship 上限制为 1
- python - 是否有任何功能可以帮助我在 PySpark 中转换日期和字符串格式
- javascript - 如何获取作为对象数组一部分的输入的当前值?
- java - 缩小最小手指距离的大小
- arm - 对齐/未对齐 AXI 传输是什么意思
- python - 我应该将特征缩放与多项式回归与 scikit-learn 结合使用吗?
- facebook - 以编程方式创建可见 Facebook 帖子的最简单/最便宜的方法是什么?