反应本机滚动视图显示在模拟器的下方

Question

我正在尝试在 React Native 中创建滚动视图。

我为滚动视图提供了全设备宽度和高度。宽度有效，但高度无效，因此该应用仅在模拟器的下方显示，

我想知道如何使它全屏显示以及为什么会出现此错误。这是它在模拟器上的加载方式。

你可以在下面找到我的 react-native 代码

import React, { Component } from 'react';
// import Counterpart from './Counterpart'
import contacts from './contacts'
import {
  View,
  Button,
  ScrollView,
  Switch,
  Text,
  Input,
  StyleSheet,
  Dimensions,
} from 'react-native';

const widthfull = Dimensions.get('window').width; //full width
const heightfull = Dimensions.get('window').height; //full height
const styles = StyleSheet.create({
  mainwrap: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    zIndex:1,
  },
  countfont: {
    fontSize: 120,
  },
  marginfromtop: {
    display: 'flex',
    flex: 1,
    paddingTop: 50,
  },
  ScrollViewstles: {
    display: 'flex',
    flex: 1,
    margin:0,
    padding:0,
    zIndex:2,
    width:widthfull,
    height:heightfull,
    paddingLeft:30
  }
});

export default class App extends Component {
  state = {
    showCounter: true
  }
  toggglecounter = () => {
    this.setState(() => ({showCounter: !this.state.showCounter}))
  }
  render() {
    if (this.state.showCounter) {
      return (
        <View style={styles.mainwrap}>
          <View style={[styles.marginfromtop, styles.countfont]}>
            <Button
              style={{ marginTop: 50 }}
              onPress={this.toggglecounter}
              title="Toggle Contacts"
            />
          </View>
          <View style={styles.mainwrap}>
           <ScrollView style={styles.ScrollViewstles}>
              {contacts.map(c => (
                  <Text key={c.key}>{c.name}</Text>
              ))}
            </ScrollView>
          </View>
        </View>
      );
    } else {
      return (
        <View style={[styles.marginfromtop, styles.countfont]}>
          <Button
            style={{ marginTop: 50 }}
            onPress={this.toggglecounter}
            title="Toggle Contacts"
          />
        </View>
      );
    }
  }
}

Answer 1

从 marginfromtop

中删除 flex: 1

  marginfromtop: {
    paddingTop: 50,
  },

反应本机滚动视图显示在模拟器的下方

react native scrollview showing up on down part of the emulator

scrollview

ecmascript-6

reactjs

react-native