时间戳

首页 > 解决方案 > 如何在 html 内容之后放置视图

html - 如何在 html 内容之后放置视图

问题描述

我的一小段代码是这样的。

<View style={{flex:1}}>
  <WebView
    style={{flex:1}}
    source={{html: content}}
  />
  <View style={{flex:1}}>
    <Text>SOME TEXT</Text>
  </View>
</View>

我想在所有 HTML 内容的末尾显示一些文本。

我的 HTML 内容不是几行。这至少是 500 行。所以它必须是滚动的。在卷轴的末尾，应该出现一些文本。

摘要：我想在html内容的末尾显示相关的帖子

标签： htmlcssreact-nativewebview

解决方案

您不应该将 Flex:1 放在子视图中，当您定义 Flex:1 时，它可能会占用整个屏幕空间。所以我想你应该首先使用这个来获得你的设备高度..

var {_height, _width} = Dimensions.get('window');

您可以将此 _height 设置为您的 WebView 并为您定义一些高度，<Text>然后从您提到的 _height 中删除该高度到 WebView 中。像这样的东西。。

import React, {Component} from 'react';
import {View, Text, StatusBar, Image, WebView, Dimensions} from 'react-native';

var {_height, _width} = Dimensions.get('window');

class Example extends React.Component {

    render() {
        return (
            <View style{{flex: 1}}>
                <WebView
                    style={{width: '100%', height: _height - 20}}
                    source={{html: content}}
                />
                <Text style={{width: '100%', height: 20}}>
                    SOME TEXT</Text>
            </View>
        );
    }
}

export default Example;

推荐阅读