Изображение в более высоком разрешении в React Native

Как вы делаете <Image> заполните всю площадь UIWindow в React Native? Если бы я использовал Autolayout, я бы установил ограничение для каждого ребра, но поток - это совсем другая парадигма, и я не веб-парень. Без установки ширины/высоты вручную на моем <Image> ничего не появляется, но как я динамически скажу, что стиль будет таким же, как ширина и высота его родительского элемента или, по крайней мере, окна?Изображение в более высоком разрешении в React Native

источник

2015-03-30 Jarsen

Вам необходимо использовать flexbox. Вот полный пример:

'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);

Обратите внимание, что вам нужен контейнер, позволяющий определить гибкость элементов внутри него. Ключ здесь alignItems: 'stretch', чтобы содержимое imageContainer заполнило доступное пространство.

iOS Simulator Screenshot

источник

2015-03-30 15:29:04

Perfect. Это в значительной степени то, что у меня было, только я использовал '' center'' вместо '' stretch''. Множество мелочей, которые мне нужно выяснить. Благодаря! – Jarsen

Да, я думаю, вам пришлось бы установить ширину пикселя, чтобы он появился с «центром». Помните, что flexbox в React Native представляет собой реализацию спецификации flexbox, поэтому вы должны иметь возможность использовать документы и руководства для этого, чтобы помочь справиться с этим. Вот хороший старт: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes –

Это, похоже, не работает для меня, я использую listview для отображения изображений, может ли возникнуть проблема с этим списком? –

если поддержка Android и IOS вы можете использовать этот код, вам нужно скрыть панель инструментов и STATUSBAR

STATUSBAR спрятана

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

ToolBar спрятана

static navigationOptions = { 
    header: null 
}

источник

2017-06-28 07:45:37 ayac3j

Изображение в более высоком разрешении в React Native

ответ

Смежные вопросы