文本的Flex行布局，反应原生

Question

我想要包装文本和数字，但是我还有一个包含在TouchableOpacity中的Number和Text，所以我不知道如何使文本流内联。意思是我希望下一个数字在前一节结尾处出现，而不是在下一行。

// These are only the relevant snippets of code to help with the question 

// Verse Component
render() {
  return  <TouchableOpacity style={styles.verseContainer} onPress={() => this.props.toggleOptions()}>
                <Text style={[styles.font, styles.verseNumber]}>
                    {this.props.number}
                </Text>
                <Text style={styles.font}>
                    {this.props.text}
                </Text>
            </TouchableOpacity>
}

// List render that renders all the verse componenets 
render() {
        var {height, width} = Dimensions.get('window');
        return (
            <SafeAreaView>
                <FlatList data={this.state.verses}
                          renderItem={v => this.renderVerse(v.item)}
                          keyExtractor={v => v.verseNumber}
                          ListFooterComponent={this.renderFooter}
                          style={[styles.listContainer, {height: height - 70, width: width}]}/>
                <CommentaryCarousel/>
            </SafeAreaView>
        )
    }

const styles = StyleSheet.create({
listContainer: {
    flexDirection: 'column',
    flexWrap: 'wrap',
    height: 100,
    paddingLeft: 10,
    paddingRight: 10,
    paddingTop: 10,
    zIndex: -1
},
verseContainer: {
    flexDirection: 'row',
    marginBottom: 10,

},
});

当前布局：

Answer 1

我最后通过分别渲染每个单词来解决这个问题。否则，flex-wrap会尝试包装每个，所以如果一个句子太长，它就不适合在下一个句子的末尾。