Как работать с адаптивным макетом в React Native

Question

Я использую библиотеку react-native-dimension для создания адаптивного интерфейса следующим образом:

const{width,height} = Dimensions.get('window');

и в моем файле style.js:

imageBackgroundLandscape:{
    width:height,
    height:width

},
imageBackgroundPortrait:{
    width:width,
    height:height
}

Проблема в том, чтокогда я поворачиваю экран, переменные ширины и высоты имеют прежние значения!Например, в портретном режиме мои переменные:

width : 800
height: 1280

и когда я поворачиваю экран, мои переменные:

width : 800 // previous value
height: 1280 // previous value

Кроме того, я использую ответную нативную ориентацию дляопределить режим экрана.Я хочу знать, как можно автоматически изменять их значения (ширину, высоту) при повороте устройства или есть другие библиотеки для этого?

Заранее спасибо.

Answer 1

Во-первых :

Вы столкнулись с этой проблемой, потому что вы забыли снова вызвать const{width,height} = Dimensions.get('window');, когда ориентация изменилась.Чтобы получить самые последние значения width и height после изменения ориентации, вам придется снова вызвать функцию Dimensions.get('window') и получить ширину и высоту из ее вывода.

Secondly :

Вместо того, чтобы использовать несколько библиотек, вы можете просто использовать одну библиотеку ( Reaction-native-styleman ), которая позволяет очень легко обрабатывать такие вещи:

Вот как будет выглядеть код при использовании Reaction-native-styleman .

import { withStyles } from 'react-native-styleman';
const styles = () => ({       
    container: {
        // your common styles here for container node.
        flex: 1,
        // lets write a media query to change background color automatically based on the device's orientation 
        '@media': [
          {
             orientation: 'landscape', // for landscape
             styles: {                 // apply following styles
                // these styles would be applied when the device is in landscape 
                // mode.
                 backgroundColor: 'green'
                 //.... more landscape related styles here...
             }
          },
          {
             orientation: 'portrait', // for portrait
             styles: {                // apply folllowing styles
                // these styles would be applied when the device is in portrait 
                // mode.
                 backgroundColor: 'red'
                 //.... more protrait related styles here...
             }
          }
        ]
    }
});

let MainComponent = ({ styles })=>(
    <View style={styles.container}>
        <Text> Hello World </Text>
    </View>
);

// now, lets wire up things together.
MainComponent = withStyles(styles)(MainComponent);

export {
  MainComponent
};

Answer 2

response-native-облегченный-отзывчивый может изменить размер вашего компонента до оптимизированного размера на каждом устройстве.

Answer 3

Обычно я справляюсь с путаницей height, width с помощью следующего кода:

//Dimensions.js
import {Dimensions} from 'react-native';
const {height, width} = Dimensions.get('window');

const actualDimensions =  {
  height:  (height<width) ? width : height,
  width: (width>height) ? height : width
};

export default actualDimensions;

Вместо того, чтобы запрашивать высоту и ширину из Dimensions, используйте actualDimensions, и для изящного управления ориентацией вы должны датьпопробуйте эту библиотеку.

Dimensions загружаются до загрузки пакета JS в приложение, поэтому рекомендуется динамически извлекать height, width для каждого renderВы можете прочитать это здесь

Answer 4

Обычно я использовал Flexbox для компоновки своих компонентов.Это помогает им быть отзывчивыми.Может быть, вы тоже можете попробовать.

Макет с Flexbox

Answer 5

На самом деле, вы делаете правильно, но половина задачи.вы получили width и height от Dimensions и это правильно, но как react-native понимает ваши изменения ориентации?

Сначала ваш код должен понимать изменение ориентации, затем вы устанавливаетефункция обратного вызова для изменения состояния вашего приложения для реализации новых width и height.

Ужасно, я не знаю, react-native может понять изменение ориентации с помощью встроенногофункции или нет.Поэтому я использую эту библиотеку , чтобы понять изменения ориентации, а затем я использую setState для повторного рендеринга кодов.

Абсолютно, я помещаю width и height внутриstate компонента.

Если вы хотите заблокировать изменение ориентации, используйте эту библиотеку .