视图内的 ReactNative ScrollView答案

【问题标题】：ReactNative ScrollView inside a View视图内的 ReactNative ScrollView
【发布时间】：2018-03-22 21:24:32
【问题描述】：

我试图在 ReactNative 的视图中创建滚动视图。由于某种原因，我无法在 ScrollView 中滚动。

render() {
    return (
      <View>
        <View>
          <Text>Top</Text>
        </View>
        <ScrollView >
          <Text>Line 1</Text>
          <Text>Line 2</Text>
          <Text>Line 3</Text>
          <Text>Line 4</Text>
          <Text>Line 5</Text>
          <Text>Line 6</Text>
          <Text>Line 7</Text>
          ...
        </ScrollView>
      </View>
    );
  }

这里有什么问题？我在 Android 上测试

谢谢，马格努斯

【问题讨论】：

stackoverflow.com/questions/39548664/…

标签： android react-native android-scrollview

【解决方案1】：

你应该给 ScrollView 一个高度。来自docs中的示例；

<ScrollView style={styles.scrollView}>
...
...
var styles = StyleSheet.create({
  scrollView: {
    height: 300,
  },
});

【讨论】：

谢谢，这不是我想要的，但它引导我使用 flex 布局。谢谢。

【解决方案2】：

不要忘记像这样从 react native 导入滚动视图 :import { 文本，看法，滚动视图 } 来自 'react-native';

    render() {
        return (
          <View style={styles.container}> // style in firstview
            <View>
              <Text>Top</Text>
            </View>
            <ScrollView contentContainerStyle={styles.Scroll}>// and give style in scrollview
              <Text>Line 1</Text>
              <Text>Line 2</Text>
              <Text>Line 3</Text>
              <Text>Line 4</Text>
              <Text>Line 5</Text>
              <Text>Line 6</Text>
              <Text>Line 7</Text>
            </ScrollView>
          </View>
        );
      }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'orange',
        justifyContent: 'center',
        // alignItems: 'center'
    },
    Scroll: {
      height: 1000,
      paddingVertical: 30,
  }
});

【讨论】：

最受欢迎的答案here 更灵活，因为当您不知道屏幕高度时，使用 1000 有点奇怪。