React native 'BottomSheetModalInternalContext' 不能为空
React native 'BottomSheetModalInternalContext' cannot be null
我正在使用 BottomSheetModal 在底部 sheet 中显示所有国家/地区的列表。但是当导航到包含底部模式的屏幕时,我收到错误消息 'BottomSheetModalInternalContext' cannot be null!
。
我假设错误发生是因为我用 null 初始化了 ref (bottomSheetModalRef
),但我不知道如何在不传递 null 的情况下创建 ref。
完整错误消息的摘录
'BottomSheetModalInternalContext' cannot be null!
This error is located at:
in ForwardRef(BottomSheetModal)
in ForwardRef(BottomSheetModal) (at CountryPicker.tsx:89)
in RCTView (at View.js:34)
in View (created by ForwardRef)
in ForwardRef (at CountryPicker.tsx:74)
...
//CountryPicker.tsx
import React, { useRef, useState, useEffect, useMemo } from 'react'
import {
ActivityIndicator,
TextInput,
TouchableOpacity,
StyleSheet,
} from 'react-native'
import axios from 'axios'
import { BottomSheetFlatList, BottomSheetModal } from '@gorhom/bottom-sheet'
import { Box, Text } from '../../theme/theme'
interface Props {
onCountrySelected: (country: string) => void
value: string
}
interface CountryProps {
flag: string
name: string
alpha3Code: string
}
const Country = (country: CountryProps) => (
<Box>
<Text>{country.name}</Text>
</Box>
)
const CountryPicker: React.FC<Props> = ({ onCountrySelected, value }) => {
const [countries, setCountries] = useState<CountryProps[]>([])
const [isLoading, setIsLoading] = useState(false)
const bottomSheetModalRef = useRef<BottomSheetModal>(null)
const handlePresentPress = () => {
if (bottomSheetModalRef.current) bottomSheetModalRef.current.present()
}
const snapPoints = useMemo(() => ['20%', '40%'], [])
const getAllCountries = async () => {
setIsLoading(true)
const res = await axios.get(
'https://restcountries.eu/rest/v2/all?fields=name;flag;alpha3Code',
)
const data = await res.data
setCountries(data)
setIsLoading(false)
}
const getCountryByCode = async (code: string) => {
setIsLoading(true)
const res = await axios.get(
`https://restcountries.eu/rest/v2/alpha/${code}?fields=name;flag;alpha3Code`,
)
const data = await res.data
setCountries(data)
setIsLoading(false)
}
const renderCountry = (country: CountryProps) => {
return (
<Country
flag={country.flag}
name={country.name}
alpha3Code={country.alpha3Code}
/>
)
}
useEffect(() => {
getAllCountries()
}, [])
return (
<Box>
<TouchableOpacity onPress={handlePresentPress}>
<Box marginVertical="xs">
<Box
paddingVertical="inputS"
paddingHorizontal="inputM"
borderRadius="s"
backgroundColor="inputBG"
borderColor="inputBG"
borderWidth={2}
>
<TextInput placeholder="Country" value={value} editable={false} />
</Box>
</Box>
</TouchableOpacity>
<BottomSheetModal ref={bottomSheetModalRef} snapPoints={snapPoints}>
{isLoading ? (
<ActivityIndicator />
) : (
<BottomSheetFlatList
data={countries}
keyExtractor={(item: CountryProps) => item.alpha3Code}
renderItem={(countries) => renderCountry(countries.item)}
contentContainerStyle={styles.contentContainer}
onRefresh={getAllCountries}
bounces={false}
/>
)}
</BottomSheetModal>
</Box>
)
}
const styles = StyleSheet.create({
contentContainer: {
flex: 1,
},
})
export default CountryPicker
确认您用 BottomSheetModalProvider
围绕您的 App.tsx
文件
return (
<BottomSheetModalProvider>
....
</BottomSheetModalProvider>
);
我正在使用 BottomSheetModal 在底部 sheet 中显示所有国家/地区的列表。但是当导航到包含底部模式的屏幕时,我收到错误消息 'BottomSheetModalInternalContext' cannot be null!
。
我假设错误发生是因为我用 null 初始化了 ref (bottomSheetModalRef
),但我不知道如何在不传递 null 的情况下创建 ref。
完整错误消息的摘录
'BottomSheetModalInternalContext' cannot be null!
This error is located at:
in ForwardRef(BottomSheetModal)
in ForwardRef(BottomSheetModal) (at CountryPicker.tsx:89)
in RCTView (at View.js:34)
in View (created by ForwardRef)
in ForwardRef (at CountryPicker.tsx:74)
...
//CountryPicker.tsx
import React, { useRef, useState, useEffect, useMemo } from 'react'
import {
ActivityIndicator,
TextInput,
TouchableOpacity,
StyleSheet,
} from 'react-native'
import axios from 'axios'
import { BottomSheetFlatList, BottomSheetModal } from '@gorhom/bottom-sheet'
import { Box, Text } from '../../theme/theme'
interface Props {
onCountrySelected: (country: string) => void
value: string
}
interface CountryProps {
flag: string
name: string
alpha3Code: string
}
const Country = (country: CountryProps) => (
<Box>
<Text>{country.name}</Text>
</Box>
)
const CountryPicker: React.FC<Props> = ({ onCountrySelected, value }) => {
const [countries, setCountries] = useState<CountryProps[]>([])
const [isLoading, setIsLoading] = useState(false)
const bottomSheetModalRef = useRef<BottomSheetModal>(null)
const handlePresentPress = () => {
if (bottomSheetModalRef.current) bottomSheetModalRef.current.present()
}
const snapPoints = useMemo(() => ['20%', '40%'], [])
const getAllCountries = async () => {
setIsLoading(true)
const res = await axios.get(
'https://restcountries.eu/rest/v2/all?fields=name;flag;alpha3Code',
)
const data = await res.data
setCountries(data)
setIsLoading(false)
}
const getCountryByCode = async (code: string) => {
setIsLoading(true)
const res = await axios.get(
`https://restcountries.eu/rest/v2/alpha/${code}?fields=name;flag;alpha3Code`,
)
const data = await res.data
setCountries(data)
setIsLoading(false)
}
const renderCountry = (country: CountryProps) => {
return (
<Country
flag={country.flag}
name={country.name}
alpha3Code={country.alpha3Code}
/>
)
}
useEffect(() => {
getAllCountries()
}, [])
return (
<Box>
<TouchableOpacity onPress={handlePresentPress}>
<Box marginVertical="xs">
<Box
paddingVertical="inputS"
paddingHorizontal="inputM"
borderRadius="s"
backgroundColor="inputBG"
borderColor="inputBG"
borderWidth={2}
>
<TextInput placeholder="Country" value={value} editable={false} />
</Box>
</Box>
</TouchableOpacity>
<BottomSheetModal ref={bottomSheetModalRef} snapPoints={snapPoints}>
{isLoading ? (
<ActivityIndicator />
) : (
<BottomSheetFlatList
data={countries}
keyExtractor={(item: CountryProps) => item.alpha3Code}
renderItem={(countries) => renderCountry(countries.item)}
contentContainerStyle={styles.contentContainer}
onRefresh={getAllCountries}
bounces={false}
/>
)}
</BottomSheetModal>
</Box>
)
}
const styles = StyleSheet.create({
contentContainer: {
flex: 1,
},
})
export default CountryPicker
确认您用 BottomSheetModalProvider
App.tsx
文件
return (
<BottomSheetModalProvider>
....
</BottomSheetModalProvider>
);