Question

我在使用FlexBox时遇到了问题。

在我的下面的代码中，有一个带有节标题的列表视图。每个部分标题下都有项目。

问题是，所有项目都显示在一行中。我该如何解决？我尝试为每行增加100％的宽度，但它没有用。

提前致谢！

＆＃13;

var styles = StyleSheet.create({
  // Default Loading View
  loading: {
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    flex: 1,
    //fontFamily: 'Rokkitt',
    justifyContent: 'center',
    padding: 5,
    paddingTop: 40,
  },
  // Table
  listView: {
    backgroundColor: '#FFFFFF',
    paddingTop: 60,
  },
  // Table Row
  rowContainer: {
    flexDirection: 'row',
    padding: 20,
  },
  // Text wrapper within row
  textContainer: {
    flex: 1
  },
  // Row separator
  separator: {
    height: 1,
    backgroundColor: '#E3E0D7'
  },
  // Row Post Title
  title: {
    color: '#3D728E',
    //fontFamily: 'Rokkitt',
    fontSize: 20,
  },
  // Row Post Description
  description: {
    color: '#7C705F',
    //fontFamily: 'Josefin Sans',
    fontSize: 14,
    lineHeight: 20,
    marginTop: 8,
    textAlign: 'left',
  },
});


class Courses extends Component {


  render() {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }

    return (
      <View style={{
        flex: 1
      }}>
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow}
        style={styles.listView}
      />
      </View>
    );
  }

  renderRow(data) {
    var rowPress = () => {
      console.log('row pressed');
    };

    var header = (
      <View>
          <View style={styles.rowContainer}>
            <View  style={styles.textContainer}>
              <Text style={styles.title}>{data.nid}</Text>
              <Text style={styles.description} numberOfLines={0}>{data.title}</Text>
            </View>
          </View>
          <View style={styles.separator}></View>
    </View>
    );
///////////

    var content = [];
    for(var x=0; x < Object.keys(data.course).length; x++){
      content.push(
        <TouchableHighlight
        underlayColor='#e3e0d7'
        key={x}
        onPress={rowPress()}
        >
        <Text style={{
          flex: 1,
          flexDirection: 'column',
          flexWrap: 'wrap',
        }}>{data.course[x].title}</Text>
        </TouchableHighlight>
      );
    }
    var clist = (
      <View style={styles.rowContainer}>
      {content}
      </View>
    );
////////////
    return (
      <Accordion
        header={header}
        content={clist}  //// <<< Problem! contents are shown in one line, i need each item to wrap whole line>>>
        easing="easeOutCubic"
      />
    );
  }

  renderLoadingView() {
    return (
      <View style={styles.loading}>
        <Text style={styles.loading}>
          Fetching Courses, please wait...
        </Text>
      </View>
    );
  }
}

＆＃13;

Answer 1

以下是一些可帮助确定问题的一般CSS / Flexbox概念：

弹性容器的初始设置为flex-direction: row，表示项目将水平对齐。对于垂直对齐，请使用flex-direction: column覆盖默认值。

注意：虽然row is the default in CSS，column is the default in React Native。

另一个初始设置是flex-wrap: nowrap（在CSS和RN中）。这意味着物品将保留在一行中。要创建多行灵活容器，请使用flex-wrap: wrap覆盖默认值。

请注意，当您切换flex-direction关键字对齐属性（例如align-items和justify-content）时，也会切换方向。

更多详情：In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

带有flexbox的Listview显示一行中的所有项目

1 个答案: