Question

我实现了本机登录页面，并为此添加了一些样式。但是然后我在模拟器上运行它，这给了我这个找不到变量的参考错误：样式

这是我的login.js代码-

import React,{Component} from 'react';
import { Alert, Button,Text, TextInput, View,TouchableOpacity, StyleSheet } from 'react-native';
// import { TouchableOpacity } from 'react-native-gesture-handler';

export default class App extends Component {
    state = {
        email: '', 
        password: '', 
        errorMassage:null
        
      }
  
  render() {

      return(
        <View style={styles.container}>
            <Text style={style.greeting}>{"Helloo.."}</Text>

            <View style={styles.errorMassage}>
                <Text>Error</Text>
            </View>

            <View style={styles.form}>
                  <View>
                        <Text style={styles.inputTitle}>Email Address</Text>
                        <TextInput style={styles.input} ></TextInput>

                  </View>


                  <View>
                        <Text style={styles.inputTitle}>Password</Text>
                        <TextInput style={styles.input} securityTextEntry autoCapitalize ="none" ></TextInput>

                  </View>
            </View>

            <TouchableOpacity style={styles.button}>
                <Text style={{color:"#FFF",fontWeight:"500"}}>Sign in</Text>
            </TouchableOpacity>

            <TouchableOpacity style={{alignSelf:"center",marginTop:32}}>
                <Text style={{color:"#414959",fontSize:13}}>New To EduApp?<Text style={{color:"#E9446A",fontWeight:"500"}}></Text>

                </Text>
            </TouchableOpacity>



        </View>
      );
    
  }
 }


const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'red',
  },

  greeting: {
    marginTop:32,
    fontSize:18,
    fontWeight:"400",
    textAlign:"center"
  },

  errorMassage:{
    alignItems:"center"  

  },
  form:{
    marginBottom:48,
    marginHorizontal:30
  },
  input:{
    borderBottomColor:"#8A8F9E",
    borderBottomWidth:StyleSheet.hairlineWidth,
    fontSize:15,
    color:"#161F3D"
  },
  inputTitle: {
    color:"#8A8F9E",
    fontSize:10,
    textTransform:"uppercase"

  },
  button:{
    marginHorizontal:30,
    backgroundColor:"#E9446A",
    borderRadius:4,
    alignItems: "center",
    justifyContent: "center",
  }
});

这是我在模拟器中遇到的错误。

我该如何解决？

Answer 1

由于代码中的错字而发生错误。它位于您提供的代码的第17行。 style.greetings应该是styles.greeting。

替换

<Text style={style.greeting}>{"Helloo.."}</Text>

使用

<Text style={styles.greeting}>{"Helloo.."}</Text>

减少这类错误的一种方法是使用支持eslint扩展的代码编辑器，该扩展器在许多情况下都强调缺少变量。我曾经有过很好的经验的是Visual Studio Code。

反应本机参考错误找不到变量：style

1 个答案: