javascript - React Native - ngăn cách từ

Tôi đang làm việc trên một ứng dụng React Native, nơi tôi hiển thị một số văn bản bên trong các hộp. Đôi khi các từ riêng lẻ trong các hộp quá dài để vừa trên một dòng, vì vậy RN sẽ tách từ ra khi nó trở nên quá dài và tiếp tục văn bản trên dòng tiếp theo. Thật không may, điều này dẫn đến việc cắt từ kém (xem hộp bên trái trong hình). Tôi đang cố gắng tìm một giải pháp để cải thiện điều này sao cho trong ví dụ này, kết quả sẽ giống như hộp bên phải, nơi từ được gạch nối tại một điểm hợp lý. Tôi biết có các thư viện javascript xử lý việc gạch nối. Ví dụ, thư viện này tách các từ thành các phần có gạch nối trong một mảng. Tôi đang bị mắc kẹt ở đây vì tôi không biết làm thế nào để thực sự xác định xem tôi có cần gạch nối từ hay không. Có ai có ý tưởng không?

Câu trả lời #1

sử dụng Mã hóa C/C++/Java:

text = 'React\u00ADNative'
<Text>{text}</Text>

Câu trả lời #2

Thực ra, tôi đã sử dụng câu trả lời của peni4142 để tạo một hàm trả về một chuỗi có thể được nối bằng dấu gạch ngang:

const hyphenatedText = (text: string): string => 
  text
    .split(' ')
    .map((word) => word.split('').join('\u00AD'))
    .join(' ');

Bây giờ, nếu hyphenatedText của bạn nằm trong một thành phần Text của React Native, nó sẽ được ngắt dấu gạch nối một cách tự động.