React Native中ScrollView无法滚动问题的解决方法

以下是导致你无法看到完整界面的核心问题及对应修复步骤：

1. 移除ScrollView的固定高度限制 #

你的ScrollView添加了h-screen类，强制其高度等于屏幕高度，内容超出后无法滚动。需移除该类，同时保留contentContainerStyle={{ flexGrow: 1 }}确保内容能自适应容器：

<ScrollView className="bg-blue-100" contentContainerStyle={{ flexGrow: 1}}>

2. 移除内部容器的全屏高度设置 #

代码中<View className="h-screen flex ">这个容器设置了全屏高度，会占据整个屏幕空间，导致后续内容被挤出可视区域。将h-screen改为flex-1或直接移除：

<View className="flex ">

3. 修复Form组件的渲染问题 #

自定义的Form组件缺少return语句，导致表单内容完全不渲染。修改后：

const Form = ({ onSubmit }) => {
  return (
    <View>
      {/* 原有表单内容 */}
    </View>
  )
}

4. 修正React Native组件的事件逻辑 #

• React Native的TextInput使用onChangeText而非onChange，参数为输入文本而非事件对象：

  <TextInput
    // ...其他属性
    onChangeText={setAmount}
  />
  

• react-native-select-dropdown的onChange回调直接返回选中值，无需取e.target.value：

  <SelectDropdown
    // ...其他属性
    onChange={(selectedValue) => setSelected(selectedValue)}
  >
  

5. 修正axios请求URL拼写错误 #

请求地址中的blockhain应为blockchain，否则会请求失败：

axios.get(`https://blockchain.info/tobtc?currency=${selected}&value=${amount}`)

修复后的完整代码 #

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://blockchain.info/tobtc?currency=${selected}&value=${amount}`)
      .then(data => {
        setCalculatedAmount(data.data)
      })
  }

  const handleSubmit = () => {
    fetchData()
  }

  if (!price || price === undefined) {
    return null
  }

  const Form = ({ onSubmit }) => {
    return (
      <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} 
            onChangeText={setAmount} 
            data-cy="amount"
          />
        </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" 
            onPress={onSubmit}
          >
            <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="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="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={(selectedValue) => setSelected(selectedValue)}
            >
              {options.map((value) => (
                <Text key={value}>{value}</Text>
              ))}
            </SelectDropdown>
          </Text>
          <Formik initialValues={{ amount: '' }} onSubmit={handleSubmit}>
            {({ handleSubmit }) => <Form onSubmit={handleSubmit} />}
          </Formik>
        </View>
      </View>
    </ScrollView>
  );
}

内容的提问来源于stack exchange，提问作者Julius Goddard