एक मल्टीलाइन बनाने, प्रतिक्रिया-मूल

Question

के साथ टेक्स्ट इनपुट का विस्तार करना मैं एक प्रतिक्रिया-मूल ऐप पर काम कर रहा हूं और एक टेक्स्ट इनपुट की आवश्यकता है जिसमें आईओएस पर "संदेश" ऐप में टेक्स्टव्यू के समान कार्यक्षमता है- इसे एक पंक्ति के रूप में शुरू करना चाहिए और फिर कुछ सीमा तक (और पाठ की 5 पंक्तियों) तक और अधिक लाइनों तक गहराई से विस्तार करें और फिर आवश्यकतानुसार नवीनतम लाइन के साथ स्क्रॉल करना शुरू करें।

SlackTextViewController पर एक नज़र डालें लेकिन ए) ऐसा लगता है कि इसमें बहुत सी चीजें हैं जो मैं नहीं चाहता हूं और बी) मैं प्रतिक्रिया में जितना अधिक कोड रखने की कोशिश करना चाहता हूं (और उद्देश्य-सी से बाहर/तेज) जितना संभव हो।

संपादित करें: बस जोर देना चाहते हैं कि मैं उद्देश्य-सी या स्विफ्ट के बजाय उपरोक्त वर्णित प्रतिक्रिया (जावास्क्रिप्ट) कोड पसंद करूंगा।

Answer 1

मैं आज क्या करने के लिए दो अलग अलग तरीकों की कोशिश की के साथ खेलते हैं। न तो सबसे अच्छा है, लेकिन मैंने सोचा कि अगर वे मददगार हैं तो मैं अपने प्रयासों को रिकॉर्ड करूंगा। वे दोनों का निश्चित रूप से प्रभाव था जिसे आप ढूंढ रहे हैं, हालांकि कभी-कभी सभी एसिंक संचार में देरी हुई।

1) पाठ ऊंचाई ऑफस्क्रीन

तो बस TextInput के तहत, मैं एक नियमित पाठ क्षेत्र में एक ही फ़ॉन्ट और गद्दी और इस तरह के साथ जोड़ा गया। मैंने इनपुट पर onChange श्रोता पंजीकृत किया और setState({text: event.nativeEvent.text}) कहा। दायर पाठ को राज्य से अपना मूल्य मिला। दोनों onLayout श्रोताओं थे। असल में, लक्ष्य टेक्स्ट इनपुट के लिए ऊंचाई (अप्रतिबंधित) पाठ से प्राप्त करना था। तब मैं

सच

https://gist.github.com/bleonard/f7d748e89ad2a485ec34

2) मूल निवासी मॉड्यूल गुप्त पाठ रास्ता छिपा दिया, मैं सिर्फ असली UITextView में सामग्री की ऊंचाई की जरूरत है। इसलिए मैंने RCTUIManager में एक श्रेणी जोड़ा क्योंकि वहां पहले से ही कई विधियां उपयोगी हैं। मैं छुपा पाठ दृश्य से छुटकारा पा लिया। तो onChange, मैं ऊंचाई के लिए पूछता हूं और उसी तरह राज्य के माध्यम से इसका उपयोग करता हूं।

https://gist.github.com/bleonard/6770fbfe0394a34c864b

3) Github पीआर

क्या मैं सच में आशा है कि इस पीआर स्वीकार कर लिया जाता है। ऐसा कुछ ऐसा स्वचालित रूप से ऐसा लगता है।

https://github.com/facebook/react-native/pull/1229

Answer 2

UITextView के प्रतिनिधि विधि लागू textViewDidChange और रेक्ट

- (void)textViewDidChange:(UITextView *)textView { 
    CGSize constraintSize = CGSizeMake(textView.frame.size.width, MAXFLOAT); 
    CGRect textRect = [textView.text boundingRectWithSize:constraintSize 
               options:NSStringDrawingUsesLineFragmentOrigin 
              attributes:@{NSFontAttributeName:textView.font} 
               context:nil]; 
    NSLog(@"Frame:%@", NSStringFromCGRect(textRect)); 
    CGRect newRect = textView.frame; 
    newRect.size.height = textRect.size.height; 
    textView.frame = newRect; 
} 

Answer 3

एक TextInput को multiline={true} जोड़ना स्क्रॉल कर सकेंगे पाठ की मात्रा उपलब्ध स्थान से अधिक है। फिर ऑनचेंज प्रोप से ईवेंट के nativeEvent.contentSize.height तक पहुंचकर आप TextInput की ऊंचाई बदल सकते हैं।

class Comment extends Component { 
    state = { 
     text: '', 
     height: 25 
    } 

    onTextChange(event) { 
    const { contentSize, text } = event.nativeEvent; 

    this.setState({ 
     text: text, 
     height: contentSize.height > 100 ? 100 : contentSize.height 
    }); 
    } 

    render() { 
     return (
     <TextInput 
      multiline 
      style={{ height: this.state.height }} 
      onChange={this.onTextChange.bind(this)} 
      value={this.state.text} 
     /> 
    ); 
    } 
} 

Answer 4

Wix से एक अच्छा घटक यह करने के लिए नहीं है Oct'17 के रूप में:

https://github.com/wix/react-native-autogrow-textinput

उपयोग बहुत आसान हो सकता है:

<AutoGrowingTextInput 
    style={styles.textInput} 
    placeholder="Enter text" 
    value={this.state.text} 
    onChangeText={this._handleChangeText} 
/> 

और वहाँ कुछ कर रहे हैं उदाहरण के लिए minHeight और maxHeight जैसे अतिरिक्त प्रोप।

मैं आर.एन. 0.47.2 पर यह उपयोग कर रहा हूँ