Cách Dễ Dàng để Thêm Chế Độ Xem Vuông vào Ứng Dụng React Native Của Bạn

react-native-square-view

Một thành phần chế độ xem vuông cho react native.

Ảnh chụp màn hình

Cài đặt

. Chạy lệnh npm install react-native-square-view --save trong thư mục dự án của bạn.
. Thêm var SquareView = require('react-native-square-view'); vào mã của bạn.

Sử dụng

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ScrollView
} = React;
var SquareView = require('react-native-square-view');

var SquareViewDemo = React.createClass({
  render: function() {
    return (
      <ScrollView style={styles.container} contentInset={{top: 20}}>
        <Text>Parent w {'>'} h and direction is column:</Text>
        <View style={{width: 200, height: 100, backgroundColor: 'orange'}}>
          <SquareView style={{flex: 1, margin: 8, alignItems: 'center', justifyContent: 'center'}}>
            <Text>A</Text>
          </SquareView>
          <SquareView style={{flex: 1, margin: 8, alignItems: 'center', justifyContent: 'center'}}>
            <Text>A</Text>
          </SquareView>
        </View>

        <Text>Parent w {'>'} h and direction is row:</Text>
        <View style={{width: 200, height: 100, backgroundColor: 'purple', flexDirection: 'row'}}>
          <SquareView style={{flex: 1, margin: 8, alignItems: 'center', justifyContent: 'center'}}>
            <Text>B</Text>
          </SquareView>
          <SquareView style={{flex: 1, margin: 8, alignItems: 'center', justifyContent: 'center'}}>
            <Text>B</Text>
          </SquareView>
          <SquareView style={{flex: 1, margin: 8, alignItems: 'center', justifyContent: 'center'}}>
            <Text>B</Text>
          </SquareView>
        </View>

        <Text>Parent w {'<'} h and direction is column:</Text>
        <View style={{width: 100, height: 200, backgroundColor: 'orange'}}>
          <SquareView style={{flex: 1, margin: 8, alignItems: 'center', justifyContent: 'center'}}>
            <Text>C</Text>
          </SquareView>
          <SquareView style={{flex: 1, margin: 8, alignItems: 'center', justifyContent: 'center'}}>
            <Text>C</Text>
          </SquareView>
        </View>

        <Text>Parent w {'<'} h and direction is row:</Text>
        <View style={{width: 100, height: 200, backgroundColor: 'purple', flexDirection: 'row'}}>
          <SquareView style={{flex: 1, margin: 8, alignItems: 'center', justifyContent: 'center'}}>
            <Text>D</Text>
          </SquareView>
          <SquareView style={{flex: 1, margin: 8, alignItems: 'center', justifyContent: 'center'}}>
            <Text>D</Text>
          </SquareView>
        </View>

      </ScrollView>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

AppRegistry.registerComponent('SquareViewDemo', () => SquareViewDemo);

Chi tiết tải về:

Tác giả: Shuangzuan
Nguồn: https://github.com/Shuangzuan/react-native-square-view

Giấy phép: MIT license