import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

const WrappedTextButton = () => {
  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.button}>
        <Text style={styles.buttonText}>
          这是一个非常非常非常非常非常非常非常长的文本内容，需要在固定宽度按钮内自动换行
        </Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  button: {
    width: 200, // 固定宽度
    padding: 10,
    backgroundColor: '#007AFF',
    borderRadius: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    textAlign: 'center',
    flexWrap: 'wrap', // 允许文本换行
    flexShrink: 1, // 允许文本缩小以适应容器
  },
});

export default WrappedTextButton;

<Text 
  style={styles.buttonText}
  numberOfLines={2} // 限制最多显示2行
  ellipsizeMode="tail" // 超出部分显示省略号
>
  这是一个非常非常非常非常非常非常非常长的文本内容
</Text>

<Text 
  style={styles.buttonText}
  textBreakStrategy="balanced" // Android特有属性，平衡换行策略
>
  这是一个非常非常非常非常非常非常非常长的文本内容
</Text>

const styles = StyleSheet.create({
  button: {
    width: 200,
    minHeight: 44, // 最小高度确保可点击区域
    padding: 10,
    backgroundColor: '#007AFF',
    borderRadius: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    textAlign: 'center',
    flexWrap: 'wrap',
    flexShrink: 1,
    ...Platform.select({
      ios: {
        lineHeight: 20,
      },
      android: {
        textBreakStrategy: 'balanced',
      },
    }),
  },
});