首页 > 解决方案 > 使用 flexWrap 在按钮末尾换行时遇到困难

问题描述

嗨:我目前正试图让我的文本在到达按钮末尾或代码中的 textWrapper 时换行。我一直在尝试很多不同的 flexWrap:'wrap" 和 flex:1 组合。下面是我所拥有的:

const OptionButton = (props) => {
    let styles = StyleSheet.create({
        
        textWrapper: {
            flexWrap: 'wrap',
            borderWidth: 1,
            borderStyle: 'solid',
            borderColor: '#000',
            borderWidth: 0,
            padding: 12,
            marginVertical: 8,
            backgroundColor: props.isActive ? '#6E6CF0' : '#fff',
            width: Dimensions.get('window').width - 40,
            height: 60,
            justifyContent:'center',
            borderRadius: 10,
        },
    
        descriptionPadding:{
            paddingLeft: 26,

        },
        inActiveTextColor: {
            color:'gray'
        },
        description:{
            flexWrap: 'wrap'
        }
  

    });

    return (
        <View>
            <TouchableWithoutFeedback onPress={props.onClick}>
                <View style={[styles.textWrapper, props.style]}>

                    <View style={styles.description}>
                        <Text style={props.isActive ? [styles.activeTextColor, styles.descriptionPadding] : [styles.normal, styles.descriptionPadding]}>{props.description}</Text>
                    </View>
                </View>
            </TouchableWithoutFeedback>
        </View>
    )
}

目前,我的描述正在按照我的预期进行包装。任何建议都会受到欢迎!

标签: iosreact-nativewrapperword-wrapstyling

解决方案


推荐阅读