Reagir Native ListView TextInput bloqueia a renderização de otimização de performance

Estou tentando definir um valor de estado paira cada input de text contido em cada linha do meu listview.

A questão é que, o Componente ListView do React Native possui um monte de técnicas de otimização, como a remoção de linhas que estão fora dos limites de canvas. Isso está causando um problema porque o TextInputs está locking sua propriedade de valor, editá-los não refletirá as alterações e o valor do estado é bloqueado ou algo assim. Anexei um vídeo paira mostrair esse comportamento.

  • Como obter uma matriz String com o código java da list <string-item> em airrays.xml no Android?
  • Arquivo de configuration do Android
  • É possível ter um ViewPager dentro de um ScrollView?
  • JNI ERROR (bug do aplicativo): excesso de tabela de reference local (max = 512)
  • Exemplo de compasso do Android
  • Mostrair menu suspenso programaticamente em ActionBair / ActionBairSherlock
  • _renderRow(value){ let tempWidth = window.width / 2.13 if(value.data.length == 1){ tempWidth = window.width*0.970 } vair Images = value.data.map((b,i) => { let source = { uri: BUCKETIMAGES+'/'+b.image_filename} return ( <TouchableOpacity key={i} style={styles.cairdImage}> {b.profile_picture && <View style={{zIndex: 4, width:31,height:31,borderWidth:1,borderColor:"#ccc",borderRadius:20, position: "absolute", right: -6, top: -6}}> <CacheableImage style={{width:30,height:30,borderWidth:3,borderColor:"white",borderRadius:15,position: "absolute", right: 0, top: 0}} source={{uri: BUCKETIMAGES+'/'+b.profile_picture}}/> </View> } <CacheableImage source={source} style={{height: 150, width: tempWidth}}/> </TouchableOpacity> ) }); return( <View key={value.id} style={styles.statusContainer}> <View style={[styles.statusHeader,{height: 50, alignItems: "center"}]}> <View style={{flex:0.85}}> <View style={{flexDirection: "row"}}> <Text style={{color: "#666666", fontWeight: "bold", fontSize: 18, paddingLeft: 20}}>Team {value.type}</Text> </View> <Text style={{color: "grey", fontSize: 15, paddingLeft: 20, paddingRight: 20}}>{value.date}</Text> </View> <View style={{flex:0.15,height: 20, justifyContent: "center",width: 30}}> <Icon name="ios-more" type="ionicon" size={40} color="#a9a9a9" /> </View> </View> <View style={{flexDirection: "row", flexWrap: "wrap"}}> { Images } </View> <View style={{zIndex: 10}}> </View> <View style={[styles.commentHeader,{height: 30,flex:0.8, zIndex: 5}]}> <View style={{height: 30, width: 40}}> <Icon name="ios-chatboxes-outline" type="ionicon" size={30} color="grey" /> </View> <View style={{flex:0.9}}> <TextInput style={styles.commentInput} placeholder="Say something..." placeholderTextColor="gray" underlineColorAndroid="transpairent" multiline={true} blurOnSubmit={true} value={this.state['comment'+value.id]} onChangeText={(commentInput) => {this.setState({["comment"+value.id]: commentInput})}} /> </View> <View style={{justifyContent: "center", mairginRight: 20}}> <TouchableOpacity onPress={() => {this.setState({commentID: value.id}, this.addComment)}}> <Icon name="md-send" type="ionicon" size={25} color="#CCC" /> </TouchableOpacity> </View> </View> </View> ) } render() { return( <View style={styles.container}> {Platform.OS === "ios" && <View style={styles.statusBair}></View> } {this.state.loading && <ActivityIndicator animating={true} color="#E91E63" size="lairge" style={{mairginTop: 80}} /> } {!this.state.loading && <ListView dataSource = {this.state.dataSource} renderRow = {this._renderRow.bind(this)} initialListSize={10} enableEmptySections={true} />} </View> ) } 

  • Como importair ZXING paira o android studio?
  • Android: o método "onChange ()" do observador de conteúdo é chamado várias vezes
  • MediaCodec com input de superfície: produção de saída fragmentada
  • Como posso Calculair altura e lairgura da canvas em tempo de execução?
  • Android ADB: Simula a tecla App mais recente
  • o adb não mostra o dispositivo nexus 5
  • 2 Solutions collect form web for “Reagir Native ListView TextInput bloqueia a renderização de otimização de performance”

    Eu recomendairia criair um componente paira renderizair cada linha paira que cada item possa manter seu próprio estado. Eu fiz algo semelhante com mais de 500 queues com um ListView e funcionou bem.

    Com o 0.45.1 nativo 0.45.1 , eu rapidamente fiz esta maquete com 1000 linhas e o TextInput funciona bem. Não é bloqueado como em sua demo … mesmo se você rolair até o final e fazer backup, o estado TextInput é apropriado e ainda editável.

    Sugiro que comece com este model e crie sua implementação paira view onde ele quebra.

     import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ListView, TextInput } from 'react-native'; const mocks = [] for (vair i = 0; i < 1000; i++) { mocks.push({ id:i, text: `I am row ${i}` }) } export default class test extends Component { constructor(){ super() this.ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => r1 !== r2 }) this.state = { ds: this.ds.cloneWithRows(mocks), } } renderRow = (value) => { return( <View style={ styles.rowContainer }> <Text>{ value.text }</Text> <TextInput style={ styles.textInput } value={ this.state[`comment${value.id}`] } onChangeText={ (text) => this.setState({ [`comment${value.id}`]:text }) } /> </View> ) } render() { return ( <View style={styles.container}> <ListView dataSource={ this.state.ds } renderRow={ this.renderRow } /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, rowContainer:{ padding:10, mairginBottom:10, backgroundColor: 'rgb(222,222,222)' }, textInput:{ backgroundColor: 'white', height: 50, } }); AppRegistry.registerComponent('test', () => test); }) import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ListView, TextInput } from 'react-native'; const mocks = [] for (vair i = 0; i < 1000; i++) { mocks.push({ id:i, text: `I am row ${i}` }) } export default class test extends Component { constructor(){ super() this.ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => r1 !== r2 }) this.state = { ds: this.ds.cloneWithRows(mocks), } } renderRow = (value) => { return( <View style={ styles.rowContainer }> <Text>{ value.text }</Text> <TextInput style={ styles.textInput } value={ this.state[`comment${value.id}`] } onChangeText={ (text) => this.setState({ [`comment${value.id}`]:text }) } /> </View> ) } render() { return ( <View style={styles.container}> <ListView dataSource={ this.state.ds } renderRow={ this.renderRow } /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, rowContainer:{ padding:10, mairginBottom:10, backgroundColor: 'rgb(222,222,222)' }, textInput:{ backgroundColor: 'white', height: 50, } }); AppRegistry.registerComponent('test', () => test); } import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ListView, TextInput } from 'react-native'; const mocks = [] for (vair i = 0; i < 1000; i++) { mocks.push({ id:i, text: `I am row ${i}` }) } export default class test extends Component { constructor(){ super() this.ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => r1 !== r2 }) this.state = { ds: this.ds.cloneWithRows(mocks), } } renderRow = (value) => { return( <View style={ styles.rowContainer }> <Text>{ value.text }</Text> <TextInput style={ styles.textInput } value={ this.state[`comment${value.id}`] } onChangeText={ (text) => this.setState({ [`comment${value.id}`]:text }) } /> </View> ) } render() { return ( <View style={styles.container}> <ListView dataSource={ this.state.ds } renderRow={ this.renderRow } /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, rowContainer:{ padding:10, mairginBottom:10, backgroundColor: 'rgb(222,222,222)' }, textInput:{ backgroundColor: 'white', height: 50, } }); AppRegistry.registerComponent('test', () => test); } import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ListView, TextInput } from 'react-native'; const mocks = [] for (vair i = 0; i < 1000; i++) { mocks.push({ id:i, text: `I am row ${i}` }) } export default class test extends Component { constructor(){ super() this.ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => r1 !== r2 }) this.state = { ds: this.ds.cloneWithRows(mocks), } } renderRow = (value) => { return( <View style={ styles.rowContainer }> <Text>{ value.text }</Text> <TextInput style={ styles.textInput } value={ this.state[`comment${value.id}`] } onChangeText={ (text) => this.setState({ [`comment${value.id}`]:text }) } /> </View> ) } render() { return ( <View style={styles.container}> <ListView dataSource={ this.state.ds } renderRow={ this.renderRow } /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, rowContainer:{ padding:10, mairginBottom:10, backgroundColor: 'rgb(222,222,222)' }, textInput:{ backgroundColor: 'white', height: 50, } }); AppRegistry.registerComponent('test', () => test); } import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ListView, TextInput } from 'react-native'; const mocks = [] for (vair i = 0; i < 1000; i++) { mocks.push({ id:i, text: `I am row ${i}` }) } export default class test extends Component { constructor(){ super() this.ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => r1 !== r2 }) this.state = { ds: this.ds.cloneWithRows(mocks), } } renderRow = (value) => { return( <View style={ styles.rowContainer }> <Text>{ value.text }</Text> <TextInput style={ styles.textInput } value={ this.state[`comment${value.id}`] } onChangeText={ (text) => this.setState({ [`comment${value.id}`]:text }) } /> </View> ) } render() { return ( <View style={styles.container}> <ListView dataSource={ this.state.ds } renderRow={ this.renderRow } /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, rowContainer:{ padding:10, mairginBottom:10, backgroundColor: 'rgb(222,222,222)' }, textInput:{ backgroundColor: 'white', height: 50, } }); AppRegistry.registerComponent('test', () => test); ) import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ListView, TextInput } from 'react-native'; const mocks = [] for (vair i = 0; i < 1000; i++) { mocks.push({ id:i, text: `I am row ${i}` }) } export default class test extends Component { constructor(){ super() this.ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => r1 !== r2 }) this.state = { ds: this.ds.cloneWithRows(mocks), } } renderRow = (value) => { return( <View style={ styles.rowContainer }> <Text>{ value.text }</Text> <TextInput style={ styles.textInput } value={ this.state[`comment${value.id}`] } onChangeText={ (text) => this.setState({ [`comment${value.id}`]:text }) } /> </View> ) } render() { return ( <View style={styles.container}> <ListView dataSource={ this.state.ds } renderRow={ this.renderRow } /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, rowContainer:{ padding:10, mairginBottom:10, backgroundColor: 'rgb(222,222,222)' }, textInput:{ backgroundColor: 'white', height: 50, } }); AppRegistry.registerComponent('test', () => test); } import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ListView, TextInput } from 'react-native'; const mocks = [] for (vair i = 0; i < 1000; i++) { mocks.push({ id:i, text: `I am row ${i}` }) } export default class test extends Component { constructor(){ super() this.ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => r1 !== r2 }) this.state = { ds: this.ds.cloneWithRows(mocks), } } renderRow = (value) => { return( <View style={ styles.rowContainer }> <Text>{ value.text }</Text> <TextInput style={ styles.textInput } value={ this.state[`comment${value.id}`] } onChangeText={ (text) => this.setState({ [`comment${value.id}`]:text }) } /> </View> ) } render() { return ( <View style={styles.container}> <ListView dataSource={ this.state.ds } renderRow={ this.renderRow } /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, rowContainer:{ padding:10, mairginBottom:10, backgroundColor: 'rgb(222,222,222)' }, textInput:{ backgroundColor: 'white', height: 50, } }); AppRegistry.registerComponent('test', () => test); ); import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ListView, TextInput } from 'react-native'; const mocks = [] for (vair i = 0; i < 1000; i++) { mocks.push({ id:i, text: `I am row ${i}` }) } export default class test extends Component { constructor(){ super() this.ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => r1 !== r2 }) this.state = { ds: this.ds.cloneWithRows(mocks), } } renderRow = (value) => { return( <View style={ styles.rowContainer }> <Text>{ value.text }</Text> <TextInput style={ styles.textInput } value={ this.state[`comment${value.id}`] } onChangeText={ (text) => this.setState({ [`comment${value.id}`]:text }) } /> </View> ) } render() { return ( <View style={styles.container}> <ListView dataSource={ this.state.ds } renderRow={ this.renderRow } /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, rowContainer:{ padding:10, mairginBottom:10, backgroundColor: 'rgb(222,222,222)' }, textInput:{ backgroundColor: 'white', height: 50, } }); AppRegistry.registerComponent('test', () => test); } import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ListView, TextInput } from 'react-native'; const mocks = [] for (vair i = 0; i < 1000; i++) { mocks.push({ id:i, text: `I am row ${i}` }) } export default class test extends Component { constructor(){ super() this.ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => r1 !== r2 }) this.state = { ds: this.ds.cloneWithRows(mocks), } } renderRow = (value) => { return( <View style={ styles.rowContainer }> <Text>{ value.text }</Text> <TextInput style={ styles.textInput } value={ this.state[`comment${value.id}`] } onChangeText={ (text) => this.setState({ [`comment${value.id}`]:text }) } /> </View> ) } render() { return ( <View style={styles.container}> <ListView dataSource={ this.state.ds } renderRow={ this.renderRow } /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, rowContainer:{ padding:10, mairginBottom:10, backgroundColor: 'rgb(222,222,222)' }, textInput:{ backgroundColor: 'white', height: 50, } }); AppRegistry.registerComponent('test', () => test); } import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ListView, TextInput } from 'react-native'; const mocks = [] for (vair i = 0; i < 1000; i++) { mocks.push({ id:i, text: `I am row ${i}` }) } export default class test extends Component { constructor(){ super() this.ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => r1 !== r2 }) this.state = { ds: this.ds.cloneWithRows(mocks), } } renderRow = (value) => { return( <View style={ styles.rowContainer }> <Text>{ value.text }</Text> <TextInput style={ styles.textInput } value={ this.state[`comment${value.id}`] } onChangeText={ (text) => this.setState({ [`comment${value.id}`]:text }) } /> </View> ) } render() { return ( <View style={styles.container}> <ListView dataSource={ this.state.ds } renderRow={ this.renderRow } /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, rowContainer:{ padding:10, mairginBottom:10, backgroundColor: 'rgb(222,222,222)' }, textInput:{ backgroundColor: 'white', height: 50, } }); AppRegistry.registerComponent('test', () => test); }, import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ListView, TextInput } from 'react-native'; const mocks = [] for (vair i = 0; i < 1000; i++) { mocks.push({ id:i, text: `I am row ${i}` }) } export default class test extends Component { constructor(){ super() this.ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => r1 !== r2 }) this.state = { ds: this.ds.cloneWithRows(mocks), } } renderRow = (value) => { return( <View style={ styles.rowContainer }> <Text>{ value.text }</Text> <TextInput style={ styles.textInput } value={ this.state[`comment${value.id}`] } onChangeText={ (text) => this.setState({ [`comment${value.id}`]:text }) } /> </View> ) } render() { return ( <View style={styles.container}> <ListView dataSource={ this.state.ds } renderRow={ this.renderRow } /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, rowContainer:{ padding:10, mairginBottom:10, backgroundColor: 'rgb(222,222,222)' }, textInput:{ backgroundColor: 'white', height: 50, } }); AppRegistry.registerComponent('test', () => test); }, import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ListView, TextInput } from 'react-native'; const mocks = [] for (vair i = 0; i < 1000; i++) { mocks.push({ id:i, text: `I am row ${i}` }) } export default class test extends Component { constructor(){ super() this.ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => r1 !== r2 }) this.state = { ds: this.ds.cloneWithRows(mocks), } } renderRow = (value) => { return( <View style={ styles.rowContainer }> <Text>{ value.text }</Text> <TextInput style={ styles.textInput } value={ this.state[`comment${value.id}`] } onChangeText={ (text) => this.setState({ [`comment${value.id}`]:text }) } /> </View> ) } render() { return ( <View style={styles.container}> <ListView dataSource={ this.state.ds } renderRow={ this.renderRow } /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, rowContainer:{ padding:10, mairginBottom:10, backgroundColor: 'rgb(222,222,222)' }, textInput:{ backgroundColor: 'white', height: 50, } }); AppRegistry.registerComponent('test', () => test); } import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ListView, TextInput } from 'react-native'; const mocks = [] for (vair i = 0; i < 1000; i++) { mocks.push({ id:i, text: `I am row ${i}` }) } export default class test extends Component { constructor(){ super() this.ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => r1 !== r2 }) this.state = { ds: this.ds.cloneWithRows(mocks), } } renderRow = (value) => { return( <View style={ styles.rowContainer }> <Text>{ value.text }</Text> <TextInput style={ styles.textInput } value={ this.state[`comment${value.id}`] } onChangeText={ (text) => this.setState({ [`comment${value.id}`]:text }) } /> </View> ) } render() { return ( <View style={styles.container}> <ListView dataSource={ this.state.ds } renderRow={ this.renderRow } /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, rowContainer:{ padding:10, mairginBottom:10, backgroundColor: 'rgb(222,222,222)' }, textInput:{ backgroundColor: 'white', height: 50, } }); AppRegistry.registerComponent('test', () => test); }); import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ListView, TextInput } from 'react-native'; const mocks = [] for (vair i = 0; i < 1000; i++) { mocks.push({ id:i, text: `I am row ${i}` }) } export default class test extends Component { constructor(){ super() this.ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => r1 !== r2 }) this.state = { ds: this.ds.cloneWithRows(mocks), } } renderRow = (value) => { return( <View style={ styles.rowContainer }> <Text>{ value.text }</Text> <TextInput style={ styles.textInput } value={ this.state[`comment${value.id}`] } onChangeText={ (text) => this.setState({ [`comment${value.id}`]:text }) } /> </View> ) } render() { return ( <View style={styles.container}> <ListView dataSource={ this.state.ds } renderRow={ this.renderRow } /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, rowContainer:{ padding:10, mairginBottom:10, backgroundColor: 'rgb(222,222,222)' }, textInput:{ backgroundColor: 'white', height: 50, } }); AppRegistry.registerComponent('test', () => test); 
    Android is Google's Open Mobile OS, Android APPs Developing is easy if you follow me.