javascript - react-native 出现奇怪的 StyleSheet 错误

Question

我有一个包含 2 个类的 javascript 文件。对于这两个类，我都有单独的样式表。如下所示：

export class PageOne extends Component {
   render(){
      return(
        <View style={pageOne.container}>
        ...
        </View>
   )
}

const pageOne = StyleSheet.create({
    container: {
      backgroundColor: '#FFDD33',
      flex: 1,
      width: '100%',
      flexDirection: 'row',
    },
    ...
});

export class PageTwo extends Component {
    render(){
      return(
        <View style={pageTwo.container}>
        ...
        </View>
      )
   }

const pageTwo = StyleSheet.create({
   container: {
     *Error ^*
   backgroundColor: '#FFFFFF',
   flex: 1,
   width: '100%',
 },
 ...
});

错误图像

标签： javascriptreact-nativestylesheet

Answer 1

我认为您错过了}关闭 PageOne 和 PageTwo 类组件。

尝试这个：

export class PageOne extends Component {
   render() {
        return(
            <View style={pageOne.container}>
            ...
            </View>
        );
    }
}

const pageOne = StyleSheet.create({
    container: {
      backgroundColor: '#FFDD33',
      flex: 1,
      width: '100%',
      flexDirection: 'row',
    },
    ...
});

export class PageTwo extends Component {
    render(){
        return(
            <View style={pageTwo.container}>
                ...
            </View>
        )
    }
}

const pageTwo = StyleSheet.create({
   container: {
     *Error ^*
   backgroundColor: '#FFFFFF',
   flex: 1,
   width: '100%',
 },
 ...
});