React Native ScrollView 不会滚动

Question

我似乎无法弄清楚为什么我的Android应用程序中的屏幕根本无法滚动。我已经尝试了许多不同的解决方案，但它就是行不通...... 我想我的组件结构中的弹性框存在某种问题，但无法弄清楚。也许我错过了别的东西.. 请帮忙

这是我的代码：

import React, { Component } from "react";
import styled from "styled-components";
import {ScrollView,StyleSheet,SafeAreaView,View,StatusBar} from "react-native";
import MenuContentItem from "../components/MenuContentItem";
export default class MenuScreen extends Component {
static navigationOptions = {
header: null
};
render() {
return (
<SafeAreaView style={styles.container}>
<StatusBar barStyle="light-content" 
backgroundColor="#dedede" />
<ScrollView
contentContainerStyle={{
flex: 1,
justifyContent: "space-between"
}}
>
<View style={{flex:1}}>
<Container>
<Header>
<Title>Menu</Title>
</Header>
<Content>
<ContentTitle>Recommended</ContentTitle>
<ContentWrapper>
{MenuItems.map((menuItem, index) => (
<MenuContentItem
key={index}
image={menuItem.image}
title={menuItem.title}
subtitle={menuItem.subtitle}
/>
))}
</ContentWrapper>
</Content>
</Container>
</View>
</ScrollView>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
}
});
const Header = styled.View`
width: 100%;
height: 55px;
display: flex;
flex-direction: row;
align-items: center;
background: #fff;
border-bottom-color: #dedede;
border-bottom-width: 1px;
`;
const Title = styled.Text`
color: #5600ff;
margin: 0 auto;
font-family: "Roboto";
font-size: 18px;
font-weight: 400;
`;
const Container = styled.View`
width: 100%;
height: 100%;
flex: 1;
`;
const Content = styled.View`
width: 100%;
height: 100%;
padding: 40px 20px;
background: #e9edff;
flex: 1;
`;
const ContentTitle = styled.Text`
color: #5600ff;
font-family: "Roboto";
font-size: 24px;
font-weight: 600;
margin-bottom: 15px;
margin-left: 7px;
`;
const ContentWrapper = styled.View`
width: 100%;
height: 100%;
display: flex;
flex: 1;
flex-direction: row;
flex-wrap: wrap;
`;

Answer 1

根据 React-native 的文档 -

https://facebook.github.io/react-native/docs/safeareaview

SafeAreaView组件目前仅适用于IOS设备。 尝试将"安全区域视图"替换为"视图"标记，并对其应用容器样式。

Answer 2

你应该像这样添加：

<View style={{flex: 1}}>
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...    
</ScrollView>
</View>

因此，您将 flex 放在滚动视图周围的新视图上。这为我修复了它：)

Answer 3

如果你认为它应该工作，你必须在滚动视图中flex:1

Answer 4

return(<Container>
<Header>
<Title>Menu</Title>
</Header>
<Content>
<ContentTitle>Recommended</ContentTitle>
<ContentWrapper>
{MenuItems.map((menuItem, index) => (
<MenuContentItem
key={index}
image={menuItem.image}
title={menuItem.title}
subtitle={menuItem.subtitle}
/>
))}
</ContentWrapper>
</Content>
</Container>)

否则

<SafeAreaView style={styles.container}>
<ScrollView contentContainerStyle={{height:heightDP('85%')}} showsVerticalScrollIndicator={false}> 
<Text style={styles.mobText}>{i18n.t('forgetPassword.forgetPassword')}</Text>
<View>

<TextInput maxLength={10} onChangeText={(value)=>{this.setState({mobile_number: value});(value.length == 10 ? Keyboard.dismiss() : null)}} underlineColorAndroid='transparent' keyboardType='numeric' blurOnSubmit={true} style={styles.country_no}/>
</View>
....        
</ScrollView>
</SafeAreaView>

容器，内容..来自原生基础。(内容将在此处充当滚动视图)

ScrollView..来自react-native。

尝试只使用一个..