反应本机视图溢出

Question

我正在尝试模仿图像。

按钮中间有类似的问题，我无法模仿。

自从我阅读以来，似乎Android上的本机反应存在溢出问题。

我认为您可以使用： marginTop：-25

但它似乎无法解决问题。

一些建议？

链接博览会：https://snack.expo.io/Hk1yUyzB7

代码：

import React, { Component } from 'react';
import { View, StyleSheet, Image, Text } from 'react-native';
//import ViewOverflow from 'react-native-view-overflow';

export default class App extends Component {
  render() {
    var account = (
      <View>
        <View
          style={{
            paddingTop: 20,
            paddingLeft: 20,
            flexDirection: 'row',
          }}>
          <Image
            style={{ width: 50, height: 50, borderRadius: 25 }}
            source={{
              uri:
                'http://www1.pictures.zimbio.com/bg/Number+Four+World+Premiere+h5-FoI0M8-gl.jpg',
            }}
          />
          <View
            style={{
              paddingLeft: 20,
            }}>
            <Text>Yulia James</Text>
            <Text
              style={{
                color: '#ccc',
              }}>
              6 hrs · IIT London
            </Text>
          </View>
        </View>
        <Text
          style={{
            paddingTop: 20,
            paddingLeft: 20,
            paddingBottom: 20,
          }}>
          Making everyday worth it :)
        </Text>
        <View
          style={{
            paddingBottom: 20,
          }}>
          <Image
            style={{
              width: '100%',
              height: 200,
            }}
            source={{
              uri:
                'http://www.wordzz.com/wp-content/uploads/2016/11/Night-Ratri.jpg',
            }}
          />
        </View>
      </View>
    );

    var com = (
      <View
        style={{
          backgroundColor: 'rgba(230,230,230,0.8)',
          //height: 40,
          alignItems: 'center',
          //justifyContent: 'center',
          padding: 5,
          flex: 1,
        }}>
        <Text
          style={{
            color: '#ccc',
            fontSize: 18,
          }}>
          Comment
        </Text>
      </View>
    );

    return (
      <View
        style={{
          flex: 1,
          backgroundColor: '#e7eff0',
        }}>
        <View
          style={{
            backgroundColor: 'rgba(255,255,255,0.8)',
            marginTop: 50,
            borderTopWidth: 1,
            borderBottomWidth: 1,
            borderColor: '#e7e7e7',
          }}>
          {account}
          <View
            style={{
              backgroundColor: '#fff',
              borderTopWidth: 1,
              borderColor: '#ccc',
              //alignItems: 'center',
              //justifyContent: 'center',
            }}>
            <View style={styles.container2}>
              {com}
              <View
                style={{
                  //backgroundColor: '#000',
                  borderRadius: 40,
                  height: 80,
                  width: 80,
                  alignItems: 'center',
                  justifyContent: 'center',
                  borderColor: '#ccc',
                  borderWidth: 1,
                }}>
                <Image
                  style={{
                    //resizeMode: 'cover',
                    height: 40,
                    width: 40,
                  }}
                  source={{
                    uri: 'http://i.imgur.com/k5jMsaH.gif',
                  }}
                />
              </View>

              {com}
            </View>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container2: {
    flexDirection: 'row',
  },
});