我只能在React Native中看到我的应用程序的一部分,尽管我已经将应用程序 Package 在ScrollView组件中。
我尝试了很多解决方案,但都不起作用:
失败尝试:
1.将flexGrow设置为1
1.将填充设置为10
1.将flex设置为1
这些都不起作用。
如何配置ScrollView以使其所有子视图都可见?
下面是应用程序:
import { StyleSheet, Text, View, TextInput, Pressable, ScrollView } from 'react-native';
import {useState, useEffect} from 'react'
import axios from 'axios'
import SelectDropdown from 'react-native-select-dropdown'
import { Formik } from 'formik'
export default function App() {
const [price, setPrice] = useState();
const options = ["ARS", "ARD", "BRL", "CAD", "CHF", "CLP", "CNY", "CZK", "DKK", "EUR", "GBP", "HKD", "HRK", "HUF", "INR", "ISK", "JPK", "KRW", "NZD", "PLN", "RON", "RUB", "SEK", "SGD", "THB", "TRY", "TWD", "USD"]
const [selected, setSelected] = useState(options[0])
const [amount, setAmount] = useState('')
const [calculatedAmount, setCalculatedAmount] = useState()
useEffect(() => {
axios.get('https://blockchain.info/ticker')
.then(data => {
setPrice(data)
})
}, [])
const fetchData = () => {
axios.get(`https://blockhain.info/tobtc?currency=${selected}&value=${amount}`)
.then(data => {
setCalculatedAmount(data.data)
console.log(calculatedAmount)
})
}
const handleSubmit = (e) => {
e.preventDefault()
fetchData()
}
const handleAmountChange = (e) => {
e.preventDefault()
setAmount(e.target.value)
}
if (!price || price === undefined ) {
return null
}
const Form = ({ onSubmit }) => {
<View>
<Text className="py-10 text-xl">Enter value: <TextInput className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" id="amount" placeholder="Enter value in selected currency" value={amount} onChange={handleAmountChange} data-cy="amount"></TextInput></Text>
<Text className="text-center"><Pressable className="p-5 mb-2 mr-2 overflow-hidden text-2xl text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white text-black font-bold focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800" id="convert-button" type="submit"><Text>Calculate!</Text></Pressable></Text>
<Text id="#calculatedamount" className="text-xl py-8 bg-gray-100 px-2 font-bold rounded-md" data-cy="submit">Value: {calculatedAmount} BTC</Text>
</View>
}
return (
<ScrollView className=" h-screen bg-blue-100" contentContainerStyle={{ flexGrow: 1}}>
<View className="py-10">
<Text className="text-xl text-center m-auto text-black font-bold">Current Prices</Text>
</View>
<View className="md:flex justify-around h-full">
<View className="text-center text-2xl m-auto bg-gray-100 p-20 rounded-md shadow-2xl max-w-[75%]">
<Text className="text-md font-bold">(£) {price.data.GBP.symbol} {price.data.GBP.last} BTC</Text>
</View>
<View className="text-center text-2xl m-auto bg-gray-100 p-20 rounded-md shadow-2xl max-w-[75%]">
<Text className="text-md font-bold">(€) {price.data.EUR.symbol} {price.data.EUR.last} BTC</Text>
</View>
<View className="text-center text-2xl m-auto bg-gray-100 p-20 rounded-md shadow-2xl max-w-[75%]">
<Text className="text-md font-bold">($) {price.data.USD.symbol} {price.data.USD.last} BTC</Text>
</View>
</View>
<View className="h-screen flex ">
<View className="m-auto bg-blue-300 p-20 rounded-md shadow-2xl">
<Text className="text-3xl font-bold py-10">Convert Currency into BTC</Text>
<Text className="text-xl"> Select a currency: <SelectDropdown className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
id='currency'
value={selected}
data-cy="select"
onChange={(e) => setSelected(e.target.value)}>
{options.map((value) => (<Text>
<Text value={value} key={value}>
<Text> {value}</Text>
</Text>
</Text>))}
</SelectDropdown></Text>
<Formik initialValues={{ amount: '' }} onSubmit={handleSubmit}>
{({ handleSubmit }) => <Form onSubmit={handleSubmit} />}
</Formik>
</View>
</View>
</ScrollView>
);
}
1条答案
按热度按时间myzjeezk1#
ScrollView有两个样式属性:
style
和contentContainerStyle
。style
属性用于ScrollView父元素的样式设置。contentContainerStyle
属性是一个可滚动容器,位于父滚动视图
因此,要为ScrollView设置正确的布局,我们需要更新 prop :
style
像这样,有关详细信息,请参阅此blog