如何修复React-Native中的预期错误

Question

所以我一直得到这个“；”预期的错误，但似乎无法发现它在哪里，请您帮助。非常感谢。

从反应中导入反应，{useState，组件}；从反应中导入{导航}；从反应中导入{StyleSheet，TouchableHighlight，尺寸，文本，视图，Touchable不透明度，html" target="_blank">安全区域视图，图像，
按钮，TouchableWithouse tFeedback，滚动视图，文本输入，动画}；从反应本机导入{createStackNavigator，createAppContainer}从响应导航导入TacoTruckBG。/tacobg.png；

const SignPage=（{navigation}）=

state={buttonAnimation:new Animated.Value（1），}；

动画按钮 = () =

在这个渲染的顶部是错误出现的地方

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

导出默认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'，徽标：{width:width/1.5，height:height/5.5，padding:10，borderRadius:10，resizeMode:'stretch'，}，页脚：{flex:1，backgroundColor:'f6f3e4'，alignItems:'center'，justifyContent:'center'，borderTopLeftRadius:30，borderTopRightRadius:30，padding:20，paddingBottom:150，}，text_页脚：{color:'black'，fontSize:18，marginTop:20，marginLeft:10，marginRight:10，}，text输入：{width:width/1.5，height:height/12，borderRadius:5，borderWidth:1，borderColor:'#d6d7da'，marginBottom:20，marginTop:10，fontSize:18，color:'#d6d7da'，fontwweight:'粗体'，}，按钮容器：{width:width/1.5，height:height/15，padding:10，borderRadius:10，backgroundColor:'#2980b9'，marginTop:10，}，text:{color:'#000100'，fontSize:18，textAlign:'center'，fontwweight:'bold'，}，

});

Answer 1

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

1. 你不应该在基于函数的组件中使用渲染函数。在基于函数的组件中没有渲染函数。
2. 要在函数组件中使用state，您必须使用useState钩子，而不是与state = {}
3. 有没有导航导入从反应
4. 要设置Animated View的样式，您可以插入动画值，然后在此基础上定义您的样式。为此，我建议使用重新激活的v2和useAnimatedStyle钩子
5. 最后，一个适当的格式，良好的可读性的代码将大有帮助......

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

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;