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

Question

在React Native中，我试图放置一些代码，这些代码将在按下按钮后加载字体。 如果if语句出现错误（第38：6行），则显示意外的令牌，预期为（38：6）。 我不知道为什么会这样，而且我也不知道在哪里放逗号，或者是否还有其他问题。

错误信息

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

Answer 1

尝试

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

我还在onPress中看到了问题-应该是

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

Answer 2

组件的模板必须仅具有一个顶层容器。 所以我将您的组件放在一个封闭的标签之间，错误消失了：

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

另外，您也错过了在类定义末尾使用}的方法。 我用评论标记了它。

Answer 3

为什么不重构代码，然后将所有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>);
}

然后将渲染方法更改为

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

}