React本机中的ScrollView不滚动x1000

m528fe3b  于 2023-02-13  发布在  React
关注(0)|答案(1)|浏览(110)

我只能在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>
  );
}
myzjeezk

myzjeezk1#

ScrollView有两个样式属性:stylecontentContainerStyle

  • style属性用于ScrollView父元素的样式设置。
  • contentContainerStyle属性是一个可滚动容器,位于

父滚动视图
因此,要为ScrollView设置正确的布局,我们需要更新 prop :style像这样,

< ScrollView style = {
    styles.scrollView
  } >
  //... childrens
  <
  /ScrollView>

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    backgroundColor: 'pink',
    marginHorizontal: 20,
  }
});

有关详细信息,请参阅此blog

相关问题