実現したいこと
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 }
同じコードなのに開発環境だけでエラーになるのかが分からず困っています。
よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。