Pertanyaan Gambar layar penuh dalam Bereaksi Bawaan


Bagaimana Anda membuat <Image> mengisi keseluruhannya UIWindow area berukuran di React Native? Jika saya menggunakan Autolayout saya akan menetapkan batasan pada setiap sisi, tetapi flux adalah paradigma yang sangat berbeda dan saya bukan orang web. Tanpa mengatur lebar / ketinggian manual pada saya <Image> tidak ada yang muncul, tetapi bagaimana saya secara dinamis memberi tahu gaya itu sama dengan lebar dan tinggi elemen induknya, atau setidaknya jendela?


13
2018-03-30 15:04


asal


Jawaban:


Anda perlu menggunakan flexbox. Berikut contoh lengkapnya:

'use strict';

var React = require('react-native');

var {
  AppRegistry,
  StyleSheet,
  View,
  Image
} = React;

var TestCmp = React.createClass({
  render: function() {
    return (
      <View style={styles.imageContainer}>
        <Image style={styles.image} source={{uri: 'http://lorempixel.com/200/400/sports/5/'}} />
      </View>
    );
  }
});

var styles = StyleSheet.create({
  imageContainer: {
    flex: 1,
    alignItems: 'stretch'
  },
  image: {
    flex: 1
  }
});

AppRegistry.registerComponent('RCTTest', () => TestCmp);

Perhatikan bahwa Anda memerlukan wadah untuk memungkinkan Anda menentukan kelenturan item di dalamnya. Kuncinya di sini adalah alignItems: 'stretch' untuk membuat konten dari imageContainer mengisi ruang yang tersedia.

iOS Simulator Screenshot


34
2018-03-30 15:29



jika mendukung Android dan iOS Anda dapat menggunakan kode ini, Anda perlu menyembunyikan Toolbar dan StatusBar

StatusBar hiden

return (
        <View style={styles.root_layout}>
            <StatusBar hidden={true} />
            ...
        </View>
    )

ToolBar hiden

static navigationOptions = {
    header: null
}

0
2018-06-28 07:45