根据内部内容调整Webview的高度

时间:2019-05-04 09:27:37

标签: react-native

我正在React Native中使用Webview组件来呈现HTML内容。我面临的问题是我无法设置height变量,因此它不能适应其拥有的任何内容。

return (
                <View style={{flex: 1}}>
                    <Header 
                        containerStyle={{
                            backgroundColor: 'white',
                            borderBottomColor: '#dee0e2',
                            borderBottomWidth: 1
                        }}
                        centerComponent={{ text: 'Noticia', style: { color: 'black' } }}
                        leftComponent={
                            <TouchableHighlight onPress={() => navigate('homeScreen')}>
                                    <Text style={{color: '#4289f4'}}>Atrás</Text>  
                            </TouchableHighlight>
                        }
                    />
                    <ScrollView style={{padding: 5}}>
                        <View style={{flexDirection: 'column'}}>
                            <Text style={{textAlign: 'center', fontSize: 17, fontWeight: 'bold'}}>{noticia[0].titulo}</Text>
                            <Image style={{width: '100%', height: 200, alignSelf: 'stretch', marginTop: 10}} source={{uri: noticia[0].imagen}} />  
                            <View style={{height: 200, backgroundColor: 'red'}}>
                                <WebView
                                    source={{html: noticia[0].articulo}}
                                    scalesPageToFit={(Platform.OS === 'ios') ? false : true}
                                />
                            </View>
                        </View>



                    </ScrollView>
                </View>
              );

如果我不给<View>' that contents ' <Webview>' a height it does show me nothing. Tried already with flex:1`,但没有任何变化。

1 个答案:

答案 0 :(得分:0)

在您的父视图(直接在return()下的根视图)中,将其样式设置为

@Override
public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);

    // To remove:
    setDivider(null);

    // To change:
    setDivider(ContextCompat.getDrawable(getActivity(), R.drawable.your_drawable));
    setDividerHeight(your_height);
}

它将适用于任何尺寸的屏幕。