怎么修 ';' React-Native 中的预期错误

Question

import React, { useState, Component } from 'react'; 
     import {navigation } from 'react'; 
     import {   StyleSheet, TouchableHighlight,
     Dimensions, Text,   View, TouchableOpacity, SafeAreaView, Image,  
     Button, TouchableWithoutFeedback, ScrollView, TextInput, Animated }
     from 'react-native';
     import { 
        createStackNavigator, createAppContainer
     } from 'react-navigation'; 
     import TacoTruckBG from './tacobg.png';
     
     const SignPage = ({ navigation }) => {
       
     
       state = {
         buttonAnimation: new Animated.Value(1),
          };
     
       animateButton = () => {
         Animated.timing(this.state.buttonAnimation, {
           toValue: 0,
           duration: 1500,
           useNativeDriver: true,
         }).start();   };
       
      On top of this render is where the error appears
    
       render() {
         const buttonAnimation = {
           opacity: this.state.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"
                 onChangeText={(val) => setUsername(val)}
               />
               <Text style={styles.text_footer}>Password</Text>
               <TextInput style={styles.textInput}
                 placeholder="Password"
                 autoCapitalize="none"
                 secureTextEntry={true}
                 onChangeText={(password) => setPassword(password)}
               />
               <Text style={styles.text_footer}>Confirm Password</Text>
               <TextInput style={styles.textInput}
                 placeholder="Confirm Password"
                 autoCapitalize="none"
                 secureTextEntry={true}
                 onChangeText={(password) => setPassword(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',   },
     
     });

Answer 1

从根本上说，你的方法有很多问题。

1. 您不应该在基于函数的组件中使用render 函数。基于函数的组件中没有render 函数。
2. 要在功能组件中使用状态，您必须使用useState 挂钩，而不是state = {}
3. 没有从react 导入的navigation
4. 要设置Animated View 的样式，您可以插入动画值，然后根据该值定义您的样式。为此，我建议使用 reanimated v2 和 useAnimatedStyle 钩子
5. 最后，a proper formatted, well readable code will go a long way.....

你可以试试下面的代码。 （我已经删除了样式部分以使其简短）

import React, { useState, Component, useRef } 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 }) => {

  const buttonAnimation = useRef(new Animated.Value(0)).current;

  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [confirmpassword, setConfirmPassword] = useState('');

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

  const buttonAnimationOpacity = {
    opacity: buttonAnimation.interpolate({
      inputRange: [0, 1],
      outputRange: [1, 0]
    }),
  };

  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, buttonAnimationOpacity]}><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;