Question

我似乎无法弄清为什么Android应用程序中的屏幕根本无法滚动。我尝试了许多不同的解决方案，但它无法正常工作... 我想我的组件结构中的flexbox存在某种问题，但无法解决。也许我错过了其他东西。请帮助

这是我的代码：

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设备。尝试用View标记替换SafeAreaView并对其应用容器样式。

Answer 2

如果您认为flex:1应该可以工作，那么您会在滚动视图中找到

Answer 3

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>

容器，内容..来自native-base。（内容将在此处用作滚动视图）

ScrollView ..来自react-native。

尝试仅使用一个。.

Answer 4

您应该这样添加：

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

因此您将flex放在滚动视图周围的新视图上。这为我解决了问题：）

React Native ScrollView不滚动

4 个答案: