Question

我正在尝试使用flexbox实现双向（垂直和水平）对齐。

我有两个示例，一个使用flexDirection（flex-direction）row，另一个使用column并将数据放入差异部分以尝试实现我的期望结果

以下是一个示例笔：http://codepen.io/reggi/pen/RpRNJB?editors=0010

以下是全屏版本：http://codepen.io/reggi/full/RpRNJB/

在以下屏幕中，ExampleOne符合要求。但它不是在屏幕较小的时候。

这是相同的代码，每个框周围都有红色边框。

这是当屏幕缩小时发生的情况，你可以看到ExampleOne在右侧失去左侧行对齐，但是当其中一个边溢出到下一行时，ExampleTwo保持行对齐。

有一种方法可以使用弹性盒，我可以在一个例子中同时拥有这两种解决方案吗？

const {
  AppRegistry,
  StyleSheet,
  Image,
  Text,
  View
} = ReactNative;

const {
  Component
} = React

const eos = StyleSheet.create({
  container: {
    flexDirection: 'row'
  }
})

function ExampleOne (props) {
  return (
    <View style={eos.container}>
      <View>
        {Object.keys(props.items).map((value, key) => (
          <View key={key}>
            <Text>{value}</Text>
          </View>
        ))}
      </View>
      <View>
        {Object.values(props.items).map((value, key) => (
          <View key={key}>
            <Text>{value}</Text>
          </View>
        ))}
      </View>
    </View>
  )
}

const ets = StyleSheet.create({
  container: {
    flexDirection: 'column'
  }
  item: {
    flexDirection: 'row'
  }
})


function ExampleTwo (props) {
  return (
    <View style={ets.container}>
      {Object.keys(props.items).map((itemKey, key) => (
        <View key={key} style={ets.item}>
          <View>
            <Text>{itemKey}</Text>
          </View>
          <View>
            <Text>{props.items[itemKey]}</Text>
          </View>
        </View>
      ))}
    </View>
  )
}

const items = {
  "SortAs": "SGML", 
    "GlossTerm": "Standard Generalized Markup Language",
    "Acronym": "SGML",
    "Abbrev": "ISO 8879:1986"
}

class SampleApp extends Component {
  render() {
    return (
      <View>
        <Text>Example One</Text>
          <ExampleOne items={items}/>
        <Text>Example Two</Text>
          <ExampleTwo items={items}/>
      </View>
    )
  }
}

// rendering
const rootTag = document.getElementById('react-root');
AppRegistry.registerComponent('SampleApp', () => SampleApp);
AppRegistry.runApplication('SampleApp', { rootTag });

Flexbox对齐（键，值）垂直和水平列表

0 个答案: