react-native - React-native：在两行显示内容

问题描述

我想每行显示 6 个选项，而不是每行只显示一个选项。我还是 react-native 的新手这是代码：

import React from 'react';
import {fromJS} from 'immutable';
import {ScrollView, StyleSheet, TouchableOpacity} from 'react-native';
import {Text} from 'src/components';
import Option from './OptionVariable';
import {checkOption} from 'src/modules/product/helper';
import {margin} from 'src/components/config/spacing';

class AttributeVariable extends React.Component {
  onSelectOption = (option) => {
    const {onSelectAttribute, attribute} = this.props;
    onSelectAttribute(attribute.get('id'), attribute.get('name'), option.get('option'));
  };
  render() {
    const {attribute, meta_data, variations} = this.props;
    // Attribute selected
    const attributeSelected = meta_data.find(attr => attr.get('id') === attribute.get('id') && attr.get('name') === attribute.get('name'));

    return (
      <>
        <Text>
          {attribute.get('name')}: <Text colorSecondary>{attributeSelected ? attributeSelected.get('option') : ''}</Text>
        </Text>
        <ScrollView
          style={styles.attribute}
          vertical
          showsHorizontalScrollIndicator={false}>
          {attribute.get('options').map(option => {
            const disabled = meta_data.size === 0 ? false : !checkOption(variations, meta_data, fromJS({
              id: attribute.get('id'),
              name: attribute.get('name'),
              option: option.get('option'),
            }));

            return (
              <TouchableOpacity
                activeOpacity={disabled ? 1 : 0}
                key={option}
                onPress={() => disabled ? {} : this.onSelectOption(option)}
              >
                <Option
                  type={attribute.get('type')}
                  selected={attributeSelected && option.get('option') === attributeSelected.get('option')}
                  disabled={disabled}
                  option={option}
                />
              </TouchableOpacity>
            )
          })}
        </ScrollView>

      </>
    );
  }
}
const styles = StyleSheet.create({
  attribute: {
    marginTop: margin.small,
  },
});

export default AttributeVariable;

这是它的外观：

我希望你一切都清楚。抱歉我的英语不好，这不是我的主要语言....在此先感谢您的帮助。

标签： react-native

你可以用你的属性风格说：

attribute: {
 marginTop: margin.small,
 flexDirection: 'row'
},

所以它应该在行而不是列中对齐

这应该可以帮助您了解更多关于反应原生样式组件的信息：https ://facebook.github.io/react-native/docs/flexbox

react-native - React-native：在两行显示内容

问题描述

解决方案

推荐阅读