react-native - 控制 React Native 元素上的单词/文本中断

Question

有没有办法控制 Text 组件中文本的断字行为？使用 iOS 上的多行文本组件，它会自动在有分词的地方打断文本(我还没有检查 android，但我也需要它在那里工作)。我希望改变这种行为以在每个字符级别上中断，就像您可以执行此 CSS 规则一样:

word-break: break-all;

Answer 1

变换 <text>str</text>至 <View><text>s</text><text>t</text><text>r</text></View>通过使用拆分和映射!

export default class PageCard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tail: false,
            longWord: 'longWord longWord bbbbbbbbbbbbbbbbbbbbb longWord longWord longWord',
            longWordTail: ' longWord longWord longWord bbbbbbbbbbbbbbbbbbbbb longWord longWord longWord',
            longWordTail2: ' longWord longWord bbbbbbbbbbbbbbbbbbbbb longWord longWord longWord',
        };
    }

    render() {
        return (
            <ScrollView style={{flex: 1, paddingTop: 60, paddingHorizontal: 10}}>
                
                <View style={Styles.breakWordWrap}>
                    <Text numberOfLines={2} ellipsizeMode="tail" style={Styles.breakWord}>
                        {this.state.longWord}
                    </Text>
                </View>

                <View style={Styles.breakWordWrap}>
                    {
                        this.breakWord(this.state.longWord)
                    }
                </View>

                <View style={[Styles.breakWordWrap, Styles.breakWordWrapTail]}>
                    {
                        this.breakWord(this.state.longWordTail)
                    }
                </View>

                <View style={[Styles.breakWordWrap, Styles.breakWordWrapTail]}>
                    {
                        this.breakWord(this.state.longWordTail, true)
                    }
                </View>

                {/*<View style={[Styles.breakWordWrap, Styles.breakWordWrapTail]}>*/}
                {/*    {*/}
                {/*        this.breakWord(this.state.longWordTail2, true)*/}
                {/*    }*/}
                {/*</View>*/}

            </ScrollView>
        )
    }

    breakWord = (str = '', tail = false) => {
        let strArr = (tail ? str + ' ' : str).split('');
        return strArr.map((item, index) => tail && strArr.length === index + 1 ?
            <Text key={item + index} style={[Styles.breakWord, Styles.breakWordTail, !this.state.tail && Styles.breakWordTailHide]}>...</Text> :
            (tail && strArr.length === index + 2 ? <Text key={item + index} style={[Styles.breakWord]} onLayout={this.breakWordLast}>{item}</Text>
                : <Text key={item + index} style={[Styles.breakWord]}>{item}</Text>)
        );

    }

    breakWordLast = (e) => {
        console.log(e.nativeEvent.layout)
        if (e.nativeEvent.layout.y > 50) {
            this.setState({
                tail: true
            })
        }
    }

}

const Styles = {
    box: {
        marginTop: 10,
    },
    title: {
        fontWeight: 'bold',
        color: '#333',
        textAlign: 'center'
    },
    breakWordWrap: {
        flexWrap: 'wrap',
        flexDirection: 'row',
        // not
        borderWidth: 1,
        marginTop: 30,
    },
    breakWordWrapTail: {
        position: 'relative',
        height: 50,
        overflow: 'hidden'
    },
    breakWord: {
        lineHeight: 25
    },
    breakWordTail: {
        position: 'absolute',
        backgroundColor: '#fff',
        right: 0,
        bottom: 0,
        height: 25
    },
    breakWordTailHide: {
        opacity: 0
    }
}