如何修复React-Native项目中出现的';' expected语法报错

• 核心问题是混用了函数组件和类组件的语法：你用箭头函数声明的SignPage属于函数组件，但代码内部使用了仅类组件支持的state直接赋值、render()方法、this关键字调用属性的写法。JS语法解析器无法识别函数组件内的render()定义，判定为语法错误要求补充分号，因此抛出';' expected报错。
• 额外的隐性问题：代码中用到的width/height变量没有从Dimensions接口获取，setUsername/setPassword没有声明对应的状态变量，后续运行也会报错。

两种修复方案二选一即可：

方案1：改为标准类组件写法 #

import React, { Component } from 'react'; 
import {
  StyleSheet, TouchableHighlight, Dimensions, Text, View,
  TouchableOpacity, SafeAreaView, Image, Button, TouchableWithoutFeedback,
  ScrollView, TextInput, Animated
} from 'react-native';
import TacoTruckBG from './tacobg.png';

// 提前获取屏幕宽高
const { width, height } = Dimensions.get('window');

class SignPage extends Component {
  state = {
    buttonAnimation: new Animated.Value(1),
    username: '',
    password: '',
    confirmPassword: ''
  };

  animateButton = () => {
    Animated.timing(this.state.buttonAnimation, {
      toValue: 0,
      duration: 1500,
      useNativeDriver: true,
    }).start();
  };

  render() {
    const buttonAnimation = {
      opacity: this.state.buttonAnimation,
    };
    const { navigation } = this.props;

    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Image source={TacoTruckBG} style={styles.logo} />
        </View>
      
        <View style={styles.footer}>
          <Text style={styles.text_footer}>Username</Text>
          <TextInput style={styles.textInput}
            placeholder="Username"
            autoCapitalize="none"
            value={this.state.username}
            onChangeText={(val) => this.setState({username: val})}
          />
          <Text style={styles.text_footer}>Password</Text>
          <TextInput style={styles.textInput}
            placeholder="Password"
            autoCapitalize="none"
            secureTextEntry={true}
            value={this.state.password}
            onChangeText={(password) => this.setState({password})}
          />
          <Text style={styles.text_footer}>Confirm Password</Text>
          <TextInput style={styles.textInput}
            placeholder="Confirm Password"
            autoCapitalize="none"
            secureTextEntry={true}
            value={this.state.confirmPassword}
            onChangeText={(password) => this.setState({confirmPassword: password})}
          />
          
          <TouchableOpacity onPress={() => this.animateButton()}>
            <Animated.View style={[styles.box, buttonAnimation]}><Text style={styles.text}>We love Tacos</Text></Animated.View>
          </TouchableOpacity>
          <Button title="Home Screen" style={styles.buttonContainer} onPress={() => navigation.navigate('Main')}></Button>
        </View>
      </View>
    );
  }
}

export default SignPage;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'brown',
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: width/2,
    height: 50,
    backgroundColor: '#4B0082',
    alignItems: 'center',
    justifyContent: 'center',
  },
  header: {
    flex: 1,
    backgroundColor: 'brown',
    alignItems: 'center',
    justifyContent: 'center',
  },
  logo: {
    width: width / 1.5,
    height: height / 5.5,
    padding: 10,
    borderRadius: 10,
    resizeMode: 'stretch',
  },
  footer: {
    flex: 1,
    backgroundColor: '#f6f3e4',
    alignItems: 'center',
    justifyContent: 'center',
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
    padding: 20,
    paddingBottom: 150,
    paddingTop: 150,
  },
  text_footer: {
    color: 'black',
    fontSize: 18,
    marginTop: 20,
    marginLeft: 10,
    marginRight: 10,
  },
  textInput: {
    width: width / 1.5,
    height: height / 12,
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#d6d7da',
    marginBottom: 20,
    marginTop: 10,
    fontSize: 18,
    color: '#d6d7da',
    fontWeight: 'bold',
  },
  buttonContainer: {
    width: width / 1.5,
    height: height / 15,
    padding: 10,
    borderRadius: 10,
    backgroundColor: '#2980b9',
    marginTop: 10,
  },
  text: {
    color: '#000100',
    fontSize: 18,
    textAlign: 'center',
    fontWeight: 'bold',
  },
});

方案2：改为标准Hooks函数组件写法 #

import React, { useState } from 'react'; 
import {
  StyleSheet, TouchableHighlight, Dimensions, Text, View,
  TouchableOpacity, SafeAreaView, Image, Button, TouchableWithoutFeedback,
  ScrollView, TextInput, Animated
} from 'react-native';
import TacoTruckBG from './tacobg.png';

const { width, height } = Dimensions.get('window');

const SignPage = ({ navigation }) => {
  // 用useState声明所有状态
  const [buttonAnimation] = useState(new Animated.Value(1));
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

  const animateButton = () => {
    Animated.timing(buttonAnimation, {
      toValue: 0,
      duration: 1500,
      useNativeDriver: true,
    }).start();
  };

  // 函数组件无需render方法，直接返回JSX
  const buttonAnimationStyle = {
    opacity: buttonAnimation,
  };

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Image source={TacoTruckBG} style={styles.logo} />
      </View>
    
      <View style={styles.footer}>
        <Text style={styles.text_footer}>Username</Text>
        <TextInput style={styles.textInput}
          placeholder="Username"
          autoCapitalize="none"
          value={username}
          onChangeText={(val) => setUsername(val)}
        />
        <Text style={styles.text_footer}>Password</Text>
        <TextInput style={styles.textInput}
          placeholder="Password"
          autoCapitalize="none"
          secureTextEntry={true}
          value={password}
          onChangeText={(password) => setPassword(password)}
        />
        <Text style={styles.text_footer}>Confirm Password</Text>
        <TextInput style={styles.textInput}
          placeholder="Confirm Password"
          autoCapitalize="none"
          secureTextEntry={true}
          value={confirmPassword}
          onChangeText={(password) => setConfirmPassword(password)}
        />
        
        <TouchableOpacity onPress={animateButton}>
          <Animated.View style={[styles.box, buttonAnimationStyle]}><Text style={styles.text}>We love Tacos</Text></Animated.View>
        </TouchableOpacity>
        <Button title="Home Screen" style={styles.buttonContainer} onPress={() => navigation.navigate('Main')}></Button>
      </View>
    </View>
  );
}

export default SignPage;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'brown',
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: width/2,
    height: 50,
    backgroundColor: '#4B0082',
    alignItems: 'center',
    justifyContent: 'center',
  },
  header: {
    flex: 1,
    backgroundColor: 'brown',
    alignItems: 'center',
    justifyContent: 'center',
  },
  logo: {
    width: width / 1.5,
    height: height / 5.5,
    padding: 10,
    borderRadius: 10,
    resizeMode: 'stretch',
  },
  footer: {
    flex: 1,
    backgroundColor: '#f6f3e4',
    alignItems: 'center',
    justifyContent: 'center',
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
    padding: 20,
    paddingBottom: 150,
    paddingTop: 150,
  },
  text_footer: {
    color: 'black',
    fontSize: 18,
    marginTop: 20,
    marginLeft: 10,
    marginRight: 10,
  },
  textInput: {
    width: width / 1.5,
    height: height / 12,
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#d6d7da',
    marginBottom: 20,
    marginTop: 10,
    fontSize: 18,
    color: '#d6d7da',
    fontWeight: 'bold',
  },
  buttonContainer: {
    width: width / 1.5,
    height: height / 15,
    padding: 10,
    borderRadius: 10,
    backgroundColor: '#2980b9',
    marginTop: 10,
  },
  text: {
    color: '#000100',
    fontSize: 18,
    textAlign: 'center',
    fontWeight: 'bold',
  },
});

内容的提问来源于stack exchange，提问作者NeverFallingDown 94