React Native中flexDirection: row不生效问题求助

问题出在一个极易忽略的拼写错误上：你把内层包裹<TouchableOpacity>和<Text>的<View>的属性写成了styles（复数），正确写法应为style（单数）。这个错误导致itemLeft里设置的flexDirection: 'row'完全没被应用，而View默认采用垂直的column布局，所以Text自然跑到了TouchableOpacity的下方。

修改后的代码如下（仅修正一处拼写错误）：

const Task = (props) => {
  return (
    <View style={styles.item}>
      {/* 此处将styles改为style */}
      <View style={styles.itemLeft}>
        <TouchableOpacity style={styles.square}></TouchableOpacity>
        <Text style={styles.itemText}>{props.text}</Text>
      </View>
      <View style={styles.circular}></View>
    </View>
  )
}

const styles = StyleSheet.create({
  item: {
    backgroundColor: '#FFF',
    padding: 15,
    borderRadius: 10,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 20,
  },
  itemLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    // flexWrap: 'nowrap',
  },
  square: {
    width: 24,
    height: 24,
    backgroundColor: '#FAA300',
    opacity: 0.4,
    borderRadius: 5, 
    marginRight: 15,
  },
  itemText: {
    maxWidth: '80%',
    // minWidth: '80%',
  },
  circular: {
    width: 12,
    height: 12,
    borderColor: '#55BCF6',
    borderWidth: 2,
    borderRadius: 5,
  },
})

修正后，itemLeft的横向布局会正常生效，TouchableOpacity和Text将横向排列，不会再出现上下堆叠的情况。

内容的提问来源于stack exchange，提问作者rennoib