内容在ListItem中消失

Question

我正在尝试在我的应用中创建RTL布局。我希望我的listitem出现在屏幕的整个宽度上。但我不知道如何使用flexbox

样式

list: {
            flexDirection: 'row-reverse',
            alignContent: 'stretch',
        }
listItem: {
            borderBottomWidth: 0.5,
            borderBottomColor: '#d3d1da',
            borderTopWidth: 0,
            // height: 64,
            // justifyContent: 'center',
            marginLeft: -8,
            marginRight: -20,
            flexDirection: 'row-reverse'
        },

组件代码

<FlatList
 data={this.state.options}
 style={styles.list}
 renderItem={({ item }) => (
   <TouchableOpacity
        onPress={() => { this.openOption(item); }}
    >
    <ListItem
        title={item.val}
        accessibilityLabel={`${item.val + I18n.t('at_button')}`}
        containerStyle={styles.listItem}
        titleStyle={{ color: '#47494d', fontSize: 16 }}
    />
      </TouchableOpacity>
    )}
    keyExtractor={(item, index) => `${index}`}
/>

当我禁用list的flexDirection时，ListItem中的文本内容消失，并且当我禁用listItem的flexDirection时，内容宽度也不会在全屏上显示。这是什么问题？我是Flexbox设计的新手。