阅读完此处的所有帖子后，Flex 行无法在 React Native 中工作

Question

我不知道我的代码有什么问题，但总是在< Text >下显示< TouchableOpacity >。我试图更改代码中的所有内容，但没有结果，也没有关于我试图在这里找到的其他类似问题。 FlexDirection: row 在任何情况下都不起作用。 ：

const Task = (props) => {

return (
    <View style={styles.item}>

        <View styles={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,


},
})

Answer 1

此行有错误，请将styles更改为style。

<View style={styles.itemLeft}>