react-native - React Native ScrollView 不滚动（我们认为问题不在于渲染，而在于渲染之上）

Question

我们正在尝试使我们的应用程序的屏幕可滚动，并且能够让它在我们所有的屏幕上工作，除了一个。奇怪的是，即使我们用许多不同的滚动视图教程替换了渲染函数中的所有内容，包括 facebooks 教程（https://facebook.github.io/react-native/docs/using-a-scrollview）（确保我们有正确的导入和风格的东西，如 flex），我们的屏幕不会滚动。

这是我们的代码：

    //a bunch of imports including:
    import React, { Component } from 'react';
    import {ScrollView} from 'react-native'
    class TutorialScreenNew extends Component {

        state = {
         //a bunch of states
        }


        async componentDidMount() {
          // waits for tensorflowjs to be loaded and ready

        })

        this.model = await mobilenet.load()

       this.setState({ isModelReady: true })
       this.getPermissionAsync()
       }


     getPermissionAsync = async () => {
      //some code
   }

   imageToTensor(rawImageData) {
     //some code
   }

   classifyImage = async () => {
     //some code
    }

   pickAndClassifyImage = async () => {
      //some code
     }

   renderPrediction = prediction => {
      return (
          <Text key={prediction.className} style={styles.getStartedText}>
            {prediction.className}
          </Text>
       )
    }

   handleCommon = (text) => {
      this.setState({ common: text })
   }
   handleScientific = (text) => {
      this.setState({ scientific: text })
   } 
   submit = (common, scientific) => {
      //some code
   }

    render() {

       //some lets

      //some conditionals
      return(
      <ScrollView
          style={styles.container}
          contentContainerStyle={styles.contentContainer}>

         {!predictions && !isStatusReady && (
          <View style={styles.container}>
              //content
          </View>
          )}
         {predictions && !isStatusReady && (
         <View style={styles.container}>
            //content
         </View>
          )}
         {predictions && isStatusReady && (
         <View style={styles.container}>
            //content
         </View>
         )} 

       </ScrollView>
    );  
 }
 }
 //also this is the container
 container: {
     flex: 1,
     flexGrow: 1,
     paddingTop: 20,
     paddingBottom: 10,
     backgroundColor: '#003308',
  },

标签： react-native

Answer 1

您的代码似乎是正常的，只有当内容超过您设备的高度时，滚动视图才会可见，我添加了一个代码来演示这种情况，请尝试

class TutorialScreenNew extends Component {

  ...........

  constructor(props) {
    super(props);
    this.state = {
      sampleText : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas efficitur sodales. Curabitur non massa leo.'
    }
  }


  .........
  render() {
    return (
      <View style={{flex:1}}>

        <ScrollView
          style={styles.container}
          contentContainerStyle={styles.contentContainer}>

          <View style={styles.container}>
            <Text>{this.state.sampleText}</Text>
          </View>
          <View style={styles.container}>
            <Text>{this.state.sampleText}</Text>
          </View>
          <View style={styles.container}>
            <Text>{this.state.sampleText}</Text>
          </View>
          <View style={styles.container}>
            <Text>{this.state.sampleText}</Text>
          </View>
          <View style={styles.container}>
            <Text>{this.state.sampleText}</Text>
          </View>
          <View style={styles.container}>
            <Text>{this.state.sampleText}</Text>
          </View>
          <View style={styles.container}>
            <Text>{this.state.sampleText}</Text>
          </View>
          <View style={styles.container}>
            <Text>{this.state.sampleText}</Text>
          </View>
          <View style={styles.container}>
            <Text>{this.state.sampleText}</Text>
          </View>


        </ScrollView>

      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexGrow: 1,
    paddingTop: 20,
    paddingBottom: 10,
    backgroundColor: '#003308',
 },
});