Question

使用Expo和Android App，<ScrollView>部分不会滚动。我已经阅读了很多相关的问题，但似乎无法确定问题。任何人都可以为本地新手做出反应吗？

按下按钮时会请求API，然后呈现文章标题。这一切都很好，但标题不可滚动，并不适合屏幕。我误解了<ScrollView>的作用吗？

import React from 'react'
import { ScrollView, StyleSheet, Text, View, Footer } from 'react-native'
import { Font } from 'expo'
import { Button } from 'react-native-elements'

export default class App extends React.Component {
  state = {
    fontLoaded: true,
    buttonPressed: false,
    showButton: true
  }

  onPress = (e) => {
    e.preventDefault()
    this.fetchArticlesAsync()
    this.setState({
      buttonPressed: true, 
      showButton: false
    })
  }

  async fetchArticlesAsync() {
    await fetch('http://content.guardianapis.com/search?show-fields=all&api-key=d8d8c012-6484-4bb4-82d7-2770a7c5d029')
    .then(response => response.json())
    .then(responseJSON => {
      return this.setState({
        articleList: responseJSON.response.results
      })
    })
    .catch((error) => {
      console.log(error)
    })
  }

  render() {
    return (
      <ScrollView contentContainerStyle={styles.container}>
      {
        this.state.fontLoaded &&
        <View style={this.state.buttonPressed ? styles.newsContainer : styles.container}>
          <Text style={styles.header}>Newsli</Text>
          {this.state.showButton && 
          <Button buttonStyle={styles.button} onPress={this.onPress} clear text='Feed Me' />}
          {this.state.buttonPressed &&
          <View>
            {this.state.articleList ?
            <View style={styles.articleContainer}>
            {this.state.articleList.map((article, i) => {
              return <View style={styles.articleContainer} key={i}>
                <Text style={styles.text}>{article.webTitle}</Text>
                </View>
            })}
            </View> : <Text style={styles.loading}>Loading</Text>}
          </View>}
        </View>
      }
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
    alignItems: 'center',
    justifyContent: 'center',
  },
  newsContainer: {
    flex: 1,
    backgroundColor: '#000',
    alignItems: 'center',
    justifyContent: 'flex-start',
    marginTop: 15
  },
  articleContainer: {
    flex: 1,
    backgroundColor: '#000',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    marginTop: 15
  },
  header: { 
    fontSize: 90,
    color: '#fff'
  },
  text: {
    fontSize: 20,
    color: '#fff',
  },
  loading: {
    fontSize: 24,
    color: '#FF69B4'
  },
  button: {
    borderColor: '#fff', 
    borderWidth: 2
  }
})

Answer 1

这是一个很小的错误。 ScrollView不知道当前设备的屏幕大小。您需要在View组件中包含ScrollView。请尝试以下方法......

<View style={styles.container}>
      <ScrollView>
      {...}
      </ScrollView>
</View>

下次提交问题时，会删除所有无意义的代码。喜欢字体提取。祝你好运！

ScrollView无法在React Native App中启用滚动功能

1 个答案: