質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

解決済

Native BaseのFooterコンポーネントを使いたい

Reiz
Reiz

総合スコア29

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

1回答

0評価

0クリップ

219閲覧

投稿2021/11/11 09:01

実現したいこと

NativeBaseの公式ドキュメントのサンプルを元にFooterを設置したい
Native Base Footer

発生している問題・エラーメッセージ

Render Error
"cursor" is not a valid style property.

該当のソースコード

import React from 'react'; import { NativeBaseProvider, Box, Text, Heading, VStack, FormControl, Input, Link, Button, Icon, HStack, Center, Pressable, } from 'native-base'; import { MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons'; export default function App() { const [selected, setSelected] = React.useState(1); return ( <NativeBaseProvider> <Box flex={1} bg="white" safeAreaTop> <Center flex={1}></Center> <HStack bg="indigo.600" alignItems="center" safeAreaBottom shadow={6}> <Pressable cursor="pointer" opacity={selected === 0 ? 1 : 0.5} py="3" flex={1} onPress={() => setSelected(0)}> <Center> <Icon mb="1" as={ <MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} /> } color="white" size="sm" /> <Text color="white" fontSize="12"> Home </Text> </Center> </Pressable> <Pressable cursor="pointer" opacity={selected === 1 ? 1 : 0.5} py="2" flex={1} onPress={() => setSelected(1)} > <Center> <Icon mb="1" as={<MaterialIcons name="search" />} color="white" size="sm" /> <Text color="white" fontSize="12"> Search </Text> </Center> </Pressable> <Pressable cursor="pointer" opacity={selected === 2 ? 1 : 0.6} py="2" flex={1} onPress={() => setSelected(2)} > <Center> <Icon mb={1} as={ <MaterialCommunityIcons name={selected === 2 ? 'cart' : 'cart-outline'} /> } color="white" size="sm" /> <Text color="white" fontSize={12}> Cart </Text> </Center> </Pressable> <Pressable cursor="pointer" opacity={selected === 3 ? 1 : 0.5} py="2" flex={1} onPress={() => setSelected(3)} > <Center> <Icon mb={1} as={ <MaterialCommunityIcons name={selected === 3 ? 'account' : 'account-outline'} /> } color="white" size="sm" /> <Text color="white" fontSize="12"> Account </Text> </Center> </Pressable> </HStack> </Box> </NativeBaseProvider> ); }

試したこと

公式のデモをAndroidアプリのExpo Goで実機確認⇒エラーなし
ローカルの環境にソースをコピペしてエミュレータのNOXで確認⇒上記エラー発生
ローカルの環境にソースをコピペして実機確認⇒上記エラー発生

Pressableのプロパティからcursorを削除⇒エラーは起きないがフッターが表示されなくなる

補足情報

package.jsonの内容は以下の通りです

{ "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "eject": "expo eject" }, "dependencies": { "expo": "~43.0.0", "expo-status-bar": "~1.1.0", "native-base": "^3.2.1", "react": "17.0.1", "react-dom": "17.0.1", "react-native": "0.64.2", "react-native-maps": "^0.29.3", "react-native-safe-area-context": "3.3.2", "react-native-web": "0.17.1", "styled-components": "^5.3.3", "styled-system": "^5.1.5", "react-native-svg": "12.1.1" }, "devDependencies": { "@babel/core": "^7.12.9", "@types/react": "~17.0.21", "@types/react-native": "~0.64.12", "@typescript-eslint/eslint-plugin": "^5.3.0", "@typescript-eslint/parser": "^5.3.0", "eslint": "^8.1.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-react": "^7.26.1", "expo-cli": "^4.12.10", "prettier": "^2.4.1", "typescript": "~4.3.5" }, "private": true }

同じコードなのに開発環境だけでエラーになるのかが分からず困っています。
よろしくお願い致します。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。