開発したアプリなど一覧

React Native で NativeBase を使ってテーマのカスタマイズを行おうとしたら hex is not a function と言われた

記事内にアフィリエイトリンクを含む場合があります

React Native で利用できる UI コンポーネントライブラリの1つに NativeBase というものがある。

以下のように npm でパッケージのインストールを行い、テーマを利用する為にドキュメントにあるように node コマンドを実行した。

$ npm install native-base --save $ react-native link $ node node_modules/native-base/ejectTheme.js

https://docs.nativebase.io/Customize.html#Customize

その後以下のような感じにサンプルコードを App.js に入力して

import React, { Component } from 'react'; import { Container, Content, Button, Text, StyleProvider } from 'native-base'; import getTheme from './native-base-theme/components'; import material from './native-base-theme/variables/material';

export default class App extends Component { render() { return ( <StyleProvider style={getTheme(material)}> <Container style={{alignItems:'center'}}> <Button style={{alignSelf:'center'}}> <Text>Button</Text> </Button> </Container> </StyleProvider> ); } }

npm run ios としたところ、以下のようにエラーメッセージが表示された。

"hex is not a function" とあるようにどうやら hex 関数が無いらしい。

この場合の対処法だが、エラーの発生した material.js 内にある hex 関数を hexString へ置換したら動いた。

ボタンしか配置してないけど多分きっとこれはマテリアルデザインだ。

-- 2018-01-27 追記
コード間違っていたので修正

Sponsored Link

コメント

  1. 通りすがり より:

    Buttonタグが閉じられていません。
    13行目のはにして、
    2行目のimport にButtonを追加する必要があるかと思います。

タイトルとURLをコピーしました