反应本机参考错误找不到变量：样式答案

【问题标题】：React native reference error Can't find variable :style反应本机参考错误找不到变量：样式
【发布时间】：2020-07-21 09:50:28
【问题描述】：

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

这是我的 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",
  }
});

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

我该如何解决这个问题？

【问题讨论】：

这里的错字：<Text style={style.greeting}>{"Helloo.."}</Text>

标签： react-native

【解决方案1】：

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

替换

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

与

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

减少此类错误的一种方法是使用支持 eslint 扩展的代码编辑器，其中包括下划线缺失的变量。我有很好的经验是 Visual Studio Code。

【讨论】：