捆绑失败意外的令牌反应原生答案

【问题标题】：bundling failed Unexpected token react native捆绑失败意外的令牌反应原生
【发布时间】：2019-12-04 13:43:18
【问题描述】：

我是 react native 的新手 :D 所以.. 我正在尝试使用内联样式构建一个简单的页面，当我使用 {{ like style={{}} 为我返回这个error: Unexpected token 并且当我这样写时style={} 应用程序运行成功但样式不起作用这是我的代码：

import React, { Component } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  Image,
  StatusBar,
} from 'react-native';



import styles from "./outStyles";

class App extends Component {

  render(){
    return (
      <View style={{flex=1}}>
        <View style={{backgroundColor='#f00',flex=1}} ></View>
        <View style={{backgroundColor='#00f',flex=9}} > 
        <Text>Usee First Project anbari</Text>
         </View>
        <View style={{backgroundColor='#00',flex=1}} ></View>
      </View>
    );
  };

}


export default App;

【问题讨论】：

标签： javascript reactjs react-native ecmascript-6

【解决方案1】：

JSX 中的第一组花括号表示您正在向它传递一个参数。您示例中的第二组表示该参数是一个对象。但是，您没有使用有效的 JS 对象语法。所以而不是：

<View style={{backgroundColor='#f00',flex=1}} ></View>

这样做：

<View style={{ backgroundColor: '#f00', flex: 1 }} ></View>

如果你分离你的样式对象可能会更清楚，比如在你的构造函数中设置它：

this.styles = {
    backgroundColor: '#f00', 
    flex: 1
};

然后在你的渲染中你可以这样做：

<View style={this.styles} ></View>

【讨论】：

【解决方案2】：

当您将样式传递给<View> 时，标签需要样式对象。所以这行不通...

style={{ backgroundColor='#f00', flex=1 }}

应该是: 而不是=，所以这就是你应该如何应用它...

style={{ backgroundColor:'#f00', flex:1 }}

【讨论】：