如果语句：SyntaxError意外的令牌，预期的，
[英]If statement: SyntaxError Unexpected token, expected ,
问题描述
In react native I am trying to put some code that will load the font after pressing a button. 
在React Native中，我试图放置一些代码，这些代码将在按下按钮后加载字体。 The if statement is getting an error (line 38:6) that says, Unexpected token, expected , (38:6). 如果if语句出现错误（第38：6行），则显示意外的令牌，预期为（38：6）。 I have no idea why this is happening, and I don't know where to put the comma it wants, or if the problem is something else. 我不知道为什么会这样，而且我也不知道在哪里放逗号，或者是否还有其他问题。
Updated code: 更新的代码：
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, ScrollView, TouchableHighlight, Button } from 'react-native';
import { Font } from 'expo';
var fontLoaded = false;
export default class App extends React.Component {
componentDidMount() {
Expo.Font.loadAsync({
'Cabin-Regular-TTF': require('./Cabin-Regular-TTF.ttf'),
});
}
constructor(props) {
super(props);
this.state = { postInput: ""}
}
render() {
return (
<View style={styles.container}>
<View style={{width: 1, height: 30, backgroundColor: '#e8e8e8'}} />
<Button
onPress={() => this.setState({ fontLoaded: true })}
title="Press Me To Load the App After 15 Seconds!"
color="#841584"
accessibilityLabel="Wait 15 seconds and then press me to load the font!"
/>
</View>
{fontLoaded ? (
<View style={styles.container}>
<Text style={{ fontFamily: 'Cabin-Regular-TTF', fontSize: 16 }}>
Whats on your mind? Create a post!
</Text>
<TextInput>
style={{height:40, width: 320, borderColor: '#303030', borderWidth: 1}}
onChangeText={(postInput)=>this.setState({postInput})}
value={this.state.postInput}
</TextInput>
<ScrollView>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
</ScrollView>
</View>) : (null) }
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#e8e8e8',
alignItems: 'center',
justifyContent: 'center'
},
});
3 个解决方案
解决方案1
0 2017-10-11 00:48:03
try 尝试
{
fontLoaded && (
<View style={styles.container}>
....
</View>
)
}
I also see problem in your onPress - it should be 我还在onPress中看到了问题-应该是
onPress={() => this.setState({ fontLoaded: true })}
解决方案2
0 已采纳 2017-10-11 00:55:37
The component's template must have exactly one top-level container. 组件的模板必须仅具有一个顶层容器。 So I put your component between an enclosing tag and the error's gone: 所以我将您的组件放在一个封闭的标签之间，错误消失了：
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, ScrollView, TouchableHighlight, Button } from 'react-native';
import { Font } from 'expo';
var fontLoaded = false;
export default class App extends React.Component {
componentDidMount() {
Expo.Font.loadAsync({
'Cabin-Regular-TTF': require('./Cabin-Regular-TTF.ttf'),
});
}
constructor(props) {
super(props);
this.state = { postInput: ""}
}
render() {
return (
<View>
<View style={styles.container}>
<View style={{width: 1, height: 30, backgroundColor: '#e8e8e8'}} />
<Button
onPress={this.setState({ fontLoaded: true })}
title="Press Me To Load the App After 15 Seconds!"
color="#841584"
accessibilityLabel="Wait 15 seconds and then press me to load the font!"
/>
</View>
{fontLoaded ? (
<View style={styles.container}>
<Text style={{ fontFamily: 'Cabin-Regular-TTF', fontSize: 16 }}>
Whats on your mind? Create a post!
</Text>
<TextInput>
style={{height:40, width: 320, borderColor: '#303030', borderWidth: 1}}
onChangeText={(postInput)=>this.setState({postInput})}
value={this.state.postInput}
</TextInput>
<ScrollView>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
</ScrollView>
</View>) : (null) }
</View>
);
}
} // missing one!
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#e8e8e8',
alignItems: 'center',
justifyContent: 'center'
},
});
Also, you have missed closing } at the end of class definition. 另外，您也错过了在类定义末尾使用}的方法。 I marked it with a comment. 我用评论标记了它。
解决方案3
0 2017-10-11 01:09:52
Why don't you refactor your code and move all the scrollView code to new function, eg: 为什么不重构代码，然后将所有scrollView代码移至新函数，例如：
renderScrollWrapper() {
retun(
<View style={styles.container}>
<Text style={{ fontFamily: 'Cabin-Regular-TTF', fontSize: 16 }}>
Whats on your mind? Create a post!
</Text>
<TextInput>
style={{height:40, width: 320, borderColor: '#303030', borderWidth: 1}}
onChangeText={(postInput)=>this.setState({postInput})}
value={this.state.postInput}
</TextInput>
<ScrollView>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
</ScrollView>
</View>);
}
Then change your render method to, 然后将渲染方法更改为
render() {
return (
<View>
<View style={styles.container}>
<View style={{width: 1, height: 30, backgroundColor: '#e8e8e8'}} />
<Button
onPress={this.setState({ fontLoaded: true })}
title="Press Me To Load the App After 15 Seconds!"
color="#841584"
accessibilityLabel="Wait 15 seconds and then press me to load the font!"
/>
</View>
{fontLoaded ? {this.renderScrollWrapper()} : (null) }
</View>
);
} }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
SyntaxError 意外标记，应为“，” - SyntaxError Unexpected token, expected “,”
语法错误：意外的标记，应为“，” - SyntaxError:Unexpected token, expected ","
语法错误：意外令牌，应为（10:10） - SyntaxError: Unexpected token, expected , (10:10)
Codewars：如果 else 语句中出现 SyntaxError 意外标记“&&” - Codewars: SyntaxError unexpected token '&&' in a If else statement
未捕获到的SyntaxError：意外的令牌：在chrome上，“ SyntaxError：丢失； Firefox上的“声明前” - Uncaught SyntaxError: Unexpected token : on chrome and “SyntaxError: missing ; before statement” on firefox
JSON“ SyntaxError：意外令牌'＆'。 应该是一个属性名称。” - JSON “SyntaxError: Unexpected token '&'. Expected a property name.”
尝试访问javascript对象值时出现“ SyntaxError：意外令牌，应为” - “SyntaxError: Unexpected token, expected , ” when trying to access javascript object value
柏树 | 语法错误：解析文件时出现意外标记，应为“，”： - Cypress | SyntaxError: Unexpected token, expected “,” while parsing file:
语法错误：意外标记“=”。 参数声明后需要一个 ')' 或一个 ','。 在野生动物园 - SyntaxError: Unexpected token '='. Expected a ')' or a ',' after a parameter declaration.' in safari
SyntaxError：在 require(“file_path”) 语句上出现意外的标记 '<' - SyntaxError: Unexpected token '<' on require(“file_path”) statement
相关标签