javascript - 错误“无法读取未定义的属性‘颜色’”

Question

nachos-ui我第一次尝试过Button，Input但是发生了同样的错误

TypeError "Cannot read property 'color' of undefined"

我有什么问题吗？

"react-native": 0.58.5
"nachos-ui": "^0.2.0-beta.1"

节点版本v10.15.1

import React, { PureComponent } from 'react';
import { View, Text, TextInput } from 'react-native';
import { Button, Bubble } from 'nachos-ui';


class AddPost extends PureComponent {
  constructor(props) {
    super(props);    
  }

  render() {
    return (
      <View >
        <Button> 
            Button
        </Button>
        <Bubble>
            Hello, How Are you ?
        </Bubble>
      </View>
    );
  }
}

export default AddPost;

标签： javascriptreact-native

Answer 1

您需要将您的应用程序包装在主题提供程序中，以便nachos-ui组件呈现。

见：https ://github.com/nachos-ui/nachos-ui

从文档：

The ThemeProvider component should be set at the highest level of your app. If it is not, Nachos UI components will NOT render.

import { ThemeProvider } from "nachos-ui";

export default (App = () => (
  <ThemeProvider>
    <RestOfYourApp />
  </ThemeProvider>
));
import React from 'react'
import { View } from 'react-native'
import { Button } from 'nachos-ui'

const App = () => {
  return (
    <View>
        <Button>Button</Button>
    </View>
  )
}

为了让它在你的情况下工作，试试这个（注意 ThemeProvider 通常应该位于你的应用程序的顶层App.js）：

import React, {PureComponent} from 'react';
import {View, Text, TextInput} from 'react-native';
import {Button,Bubble,ThemeProvider} from 'nachos-ui';


class AddPost extends PureComponent {

  constructor(props) {
    super(props);    
  }

  render() {
    return (
      <ThemeProvider>
        <View>
          <Button > 
              Button
          </Button>
          <Bubble>
              Hello, How Are you ?
          </Bubble>
        </View>
      </ThemeProvider>
    );
  }
}

export default AddPost;

希望这可以帮助！