Question

我正在使用本机创建电子表格，如果我们点击添加按钮，我想附加列，但是当我在动态列表中使用ref时，它会给出错误。这是我的代码..请告诉我如何使用ref所以它不会给我错误。以下是我使用ref ..

时收到的错误

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  TouchableOpacity,
  Text,
  TextInput,
  ScrollView
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
var unique=1;
export default class Sheet extends Component {
  constructor(props) {
      super(props);
      this.state = {
      currentRowNo:1,
      serialNo:1,
      rows:this.props.species.length,
      breaker:true,
      appendRows:[],
      index:1
      }
   } 
  rendercol(rowNo)
    {
      const col=[];
      var serialNo=this.state.index;
      col.push(<View key="rowNum" style={styles.column}><View style={[styles.fixCellWidth,{backgroundColor:"#f2f2f2"}]}><Text style={{fontSize:20}}>{rowNo}</Text></View></View>);
       for (var j=serialNo;j<=this.state.rows+serialNo-1;j++)
             { 
               col.push(<TouchableOpacity style={styles.fixCellWidth} key={"key_"+j}><Text style={{fontSize:16}} onPress={this.changeValue.bind(this,j)} ref={"red"+j}>{console.log(this.props.action.bind(this,j))}</Text></TouchableOpacity>);                                             
             }
     return <View key={"Row"+rowNo}>{col}</View>;
    }
  changeValue(val)
  {
     this.props.changeVal(val);
  }
  addRow(){
    this.state.appendRows.push(
        this.rendercol(this.state.index)
    )
    this.setState({
        index: this.state.index + 1,
      appendRows: this.state.appendRows
    })
  }
  render()
  {
    var _scrollView: ScrollView;
    const row=[];
    const sheet=[];
       sheet.push(<View key="headRow" style={styles.column}><View style={[styles.fixCellWidth,{backgroundColor:"#f2f2f2"}]}><Text style={{fontSize:20}}>S./#</Text></View></View>);
        this.props.species.map((option) => {
         sheet.push(<View key={option.code} style={styles.column}><View style={[styles.fixCellWidth,{backgroundColor:"#f2f2f2"}]}><Text style={{fontSize:20}}>{option.code}</Text></View></View>);
         });
       sheet.push(<TouchableOpacity key="rowAdd" style={styles.column} onPress={this.addRow.bind(this)}><View style={[styles.fixCellWidth,{backgroundColor:"green"}]}><Icon name="plus" style={[styles.icon,styles.fontWhite]}/></View></TouchableOpacity>);
    return ( 
      <ScrollView
          ref={(scrollView) => { _scrollView = scrollView; }}
          automaticallyAdjustContentInsets={false}
          horizontal={false}
          style={{height:650,paddingBottom:10}}>
      <View style={styles.column}>
        <View>{sheet}</View>
        <ScrollView
          ref={(scrollView) => { _scrollView = scrollView; }}
          automaticallyAdjustContentInsets={false}
          horizontal={true}
          style={[styles.scrollFull]}>
          {this.state.appendRows}
        </ScrollView>
      </View>
      </ScrollView>
    );
  }
}

Answer 1

您正在渲染函数中重复参考指定：

return ( 
      <ScrollView
          ref={(scrollView) => { _scrollView = scrollView; }} // <- here
          automaticallyAdjustContentInsets={false}
          horizontal={false}
          style={{height:650,paddingBottom:10}}>
      <View style={styles.column}>
        <View>{sheet}</View>
        <ScrollView
          ref={(scrollView) => { _scrollView = scrollView; }} // <- here
          automaticallyAdjustContentInsets={false}
          horizontal={true}
          style={[styles.scrollFull]}>
          {this.state.appendRows}
        </ScrollView>
      </View>
      </ScrollView>
    );

但这不是问题。问题是您要在组件的refs方法之外创建render方法，以便在rendercol函数中具体说明。以下是错误说明：https://gist.github.com/jimfb/4faa6cbfb1ef476bd105。

您可以使用州添加行，请查看此方法：Append TextInput component one after another when press button in React Native

Answer 2

import React, { Component } from 'react';
import { View, Text, Platform, StyleSheet, TouchableOpacity,TouchableHighlight, Animated, ScrollView, Image } from 'react-native';

let index = 0
export default class App extends Component {

   constructor(context) {
          super(context);
          this.state = {
              rows: []
          }
   }

  _addRow(){
    this.state.rows.push(index++)
    this.setState({ rows: this.state.rows })
  }


  render() {

    let CheckIndex = i => {
        if((i % 2) == 0) {
        return styles.gray
      }
    }

    let rows = this.state.rows.map((r, i) => {
        return <View key={ i } style={[styles.row, CheckIndex(i)]}>
                    <Text >Row { r }, Index { i }</Text>
                 </View>
    })

    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={ () => this._addRow() } style={styles.button}>
            <Text>Add new row</Text>
                </TouchableHighlight>
        { rows }
      </View>
    );
  }

}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 60,
  },
  gray: {
    backgroundColor: '#efefef'
  },
  row: {
    height:40,
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomColor: '#ededed',
    borderBottomWidth: 1
  },
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    height:55,
    backgroundColor: '#ededed',
    marginBottom:10
  }
});

使本机引用无法动态添加行

2 个答案: