Cách tính chiều rộng của văn bản trong thành phần TextInput trong React Native?

Question

Tôi đã cố gắng làm cho TextInput được tự động mở rộng quy mô, tức là chiều cao của TextInput tăng khi văn bản được bao bọc cho dòng tiếp theo.

Vì vậy, tôi đang cố gắng tính chiều rộng của văn bản và so sánh chiều rộng của nó với chiều rộng của TextInput. Nếu nó lớn hơn chiều rộng, chiều cao của TextInput sẽ tăng lên.

Vì vậy, câu hỏi của tôi là cách tính chiều rộng của văn bản? Có cách nào khác để thực hiện hiệu ứng tự động chia tỷ lệ không?

Cảm ơn!

Answer 1

Hiện tại không có cách nào dễ dàng để có được chiều rộng nội dung bên trong là TextInput.

Phản ứng gốc rất cần nhập văn bản tự động như mô tả bạn mô tả. Tôi cũng có thể sử dụng một cái, vì vậy khi tôi tìm thời gian tôi có thể thử viết một cái.

Trong khi đó, đây là một cách giải quyết để hoàn thành những gì bạn mô tả:

1. Tạo TextInput với ban đầu cao (cố định) của nó bạn.

2. Tạo phần tử nhân bản <Text> ở đâu đó ngoài màn hình (ví dụ: sử dụng vị trí tuyệt đối) có cùng kiểu với TextInput. Điều này rất dễ làm nhờ tính chất khai báo của thuộc tính style của React. Đặt chiều rộng thành cùng chiều rộng với TextInput của bạn.

   • Nếu bạn TextInput có chiều rộng đáp ứng, bạn có thể muốn xem xét onLayout, hoặc measure để có được chiều rộng, nếu không có những cách để tự động làm cho bản sao với chiều rộng tương tự (ví dụ như đặt nó trong cùng một container nhưng tắt màn hình).

3. Viết một handler onChange cho TextInput đó: (a) Cập nhật của bản sao bất cứ lúc nào các văn bản TextInput thay đổi (b) Đo chiều cao của clone (kể từ <Text> yếu tố AutoSize) (c) Sets chiều cao mới của Textinput

Mặc dù đây là một nỗi đau, bạn chỉ phải viết nó một lần. Nó có thể dễ dàng được đóng gói thành một thành phần (ví dụ) mà sau đó bạn có thể sử dụng lại với khả năng miễn dịch.

Answer 2

Mặc dù tôi không trả lời câu hỏi, tôi muốn chỉ ra rằng tự động mở rộng TextInput có thể dễ dàng được triển khai trong React Native 0.34.

class AutoScaleTextInput extends React.Component { 

    constructor() { 
    super(); 

    this.state = { 
     inputHeight: 35 
    }; 
    } 

    render() { 
    return (
     <TextInput 
     multiline={true} 
     style={{ 
      height: this.state.inputHeight 
     }} 
     onContentSizeChange={ this._onTextContentSizeChange }/> 
    ); 
    } 

    _onTextContentSizeChange = (event) => { 
    this.setState({ 
     inputHeight: Math.min(event.nativeEvent.contentSize.height, 100) 
    }); 
    } 
} 

Xem: TextInput#onContentSizeChange

Expo Snack dụ https://snack.expo.io/HkqE2AhAe