如果语句：SyntaxError意外的令牌，预计，

在反应本机我试图把一些代码，将按下按钮后加载字体。 if语句出现错误（第38行：6），表示意想不到的令牌（38：6）。我不知道为什么会发生这种情况，我不知道在哪里放置它想要的逗号，或者如果问题是别的。如果语句：SyntaxError意外的令牌，预计，

error message

Line 38

更新代码：

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' 
    }, 
});

来源

2017-10-11 GIISE

请向我们展示第38行的App.js。 – dhilt

对不起。我忘了。这是表示{fontLoaded？（我还添加了一个链接到的图像显示它是哪一个。 – GIISE

好吧！我会尽力调查... – dhilt

组件的模板必须只有一个顶级容器。所以我把一个封闭的标签和错误不见了之间的组件：

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' 
    }, 
});

而且，你已经错过了在类定义结束时关闭}。我用评论标记了它。

来源

2017-10-11 00:55:37 dhilt

我试过了，我得到了一个错误，说是期望一个组件类，得到了[object Object] – GIISE

@GIISE这是另一个错误...它与React Native有关，我们不能在这里使用'div'，需要用'View'替换'div'，我更新了答案 – dhilt

我在普通的ReactJS环境中玩过你的代码（不是React Native ），所以'div'解决方案为我工作，但'View'解决方案将适用于你。 – dhilt

尝试

{ 
    fontLoaded && (
    <View style={styles.container}> 
     .... 
    </View> 
) 
}

我也看到你的onPress问题 - 它应该是

onPress={() => this.setState({ fontLoaded: true })}

来源

2017-10-11 00:48:03 obai

可悲的是我得到与之前的完全一样，新代码也一样错误，谢谢你对onPress的帮助，虽然 – GIISE

你为什么不重构你的代码，并把所有的滚动视图代码的新功能，如：

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>); 
}

然后改变你的渲染方法，

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> 
);

}

来源

2017-10-11 01:09:52 ggsrivas

如果语句：SyntaxError意外的令牌，预计，

回答

相关问题