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

【问题标题】：react native scrollview showing up on down part of the emulator反应在模拟器的下部显示的本机滚动视图
【发布时间】：2020-04-20 03:46:14
【问题描述】：

我正在尝试在 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>
      );
    }
  }
}

【问题讨论】：

标签： reactjs react-native ecmascript-6 scrollview

【解决方案1】：

从marginfromtop 中删除flex: 1

  marginfromtop: {
    paddingTop: 50,
  },

【讨论】：