Javascript 组件异常；Can'；找不到变量：样式

我是javaScript新手，有一个有趣的问题。这里有一些背景；我正在运行Windows10，节点v15，我已经下载了expo并正在使用VisualStudio。我用来运行代码的命令是npmstart

我得到的错误是“找不到变量：style”，并指向Welcome.js中的这一行（第6行或第7行）

我开始以为这是我的进口货，但现在不是那么多了！我敢肯定这是一个简单的愚蠢的错误，但我知道什么！任何帮助都将不胜感激。谢谢你的耐心，我为你的无知道歉！ 如果还有什么我可以提供的，请告诉我，谢谢

App.js代码

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import Welcomebutton from './src/pages/Welcome';


export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Please work</Text>
        <Welcomebutton text='Welcome' color='red' />
      </View>
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  title: {
    color: 'white',
    fontSize: 20

  }
});

import React，{Component}来自'React'；
从“react native”导入{样式表、文本、视图、按钮}；
从“/src/pages/Welcome”导入Welcome按钮；
导出默认类应用程序扩展组件{
render（）{
返回(
请工作
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“白色”，
},
标题：{
颜色：'白色'，
尺寸：20
}
});

欢迎光临{ 常量内容=( {props.text} ) 返回{content} } const styles=StyleSheet.create({ 按钮：{ 填充：16， 宽度：200， 边界半径：24， 对齐项目：“中心” }, 正文：{ 颜色：'黑色'， 尺寸：20 } }); 导出默认窗口按钮；

//您在这里输入了一个小错误

//应该是styles.button而不是style.button

完整代码：

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity  } from 'react-native';

const Welcomebutton = props => {
    const content = (
        <View style={[styles.button, {backgroundColor: props.color}]}>
            <Text style={styles.text}>{props.text}</Text>
        </View>
    )
    return <TouchableOpacity onPress={props.onPress}>{content}</TouchableOpacity>
}

const styles = StyleSheet.create({
    button: {
        padding: 16,
        width: 200,
        borderRadius: 24,
        alignItems: 'center'
    },
    text: {
        color: 'black',
        fontSize: 20
    }
});

export default Welcomebutton;

从“React”导入React，{Component}；
从“react native”导入{样式表、文本、视图、TouchableOpacity}；
const Welcomebutton=道具=>{
常量内容=(
{props.text}
)
返回{content}
}
const styles=StyleSheet.create({
按钮：{
填充：16，
宽度：200，
边界半径：24，
对齐项目：“中心”
},
正文：{
颜色：'黑色'，
尺寸：20
}
});
导出默认窗口按钮；

//您在这里输入了一个小错误

//应该是styles.button而不是style.button

完整代码：

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity  } from 'react-native';

const Welcomebutton = props => {
    const content = (
        <View style={[styles.button, {backgroundColor: props.color}]}>
            <Text style={styles.text}>{props.text}</Text>
        </View>
    )
    return <TouchableOpacity onPress={props.onPress}>{content}</TouchableOpacity>
}

const styles = StyleSheet.create({
    button: {
        padding: 16,
        width: 200,
        borderRadius: 24,
        alignItems: 'center'
    },
    text: {
        color: 'black',
        fontSize: 20
    }
});

export default Welcomebutton;

从“React”导入React，{Component}；
从“react native”导入{样式表、文本、视图、TouchableOpacity}；
const Welcomebutton=道具=>{
常量内容=(
{props.text}
)
返回{content}
}
const styles=StyleSheet.create({
按钮：{
填充：16，
宽度：200，
边界半径：24，
对齐项目：“中心”
},
正文：{
颜色：'黑色'，
尺寸：20
}
});
导出默认窗口按钮；

oof，那个很疼。哈哈哈，谢谢你，我很感激你的回答：）哦，那一个很痛。哈哈哈谢谢你我很感激你的回答：）

// you made a small typo here
<View style={[style.button, {backgroundColor: props.color}]}>

// it should be styles.button not style.button
<View style={[styles.button, {backgroundColor: props.color}]}>

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity  } from 'react-native';

const Welcomebutton = props => {
    const content = (
        <View style={[styles.button, {backgroundColor: props.color}]}>
            <Text style={styles.text}>{props.text}</Text>
        </View>
    )
    return <TouchableOpacity onPress={props.onPress}>{content}</TouchableOpacity>
}

const styles = StyleSheet.create({
    button: {
        padding: 16,
        width: 200,
        borderRadius: 24,
        alignItems: 'center'
    },
    text: {
        color: 'black',
        fontSize: 20
    }
});

export default Welcomebutton;