Question

我是React Native的新手。我正在尝试构建具有内联样式的简单页面，当我使用{{像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;

Answer 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>

Answer 2

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

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

应该是:而不是=，所以这就是应用它的方法...

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

捆绑失败意外的令牌响应本机

2 个答案: