Question

我是React-Native的新手，我正在构建一个小应用程序。我遇到了一个奇怪的问题。如果我的JSON长度大于9，则我的部分Header无法正常工作。我基本上是在表演和隐藏。我有一个浮动按钮，当按下隐藏按钮时，它会显示一个输入框。当我超过9节的标题长度时，不会强制进行另一次渲染。我可以操纵数据，但我觉得我会因为学习经验而欺骗自己。希望我能清楚地解释自己。

我的Json数据如下所示：

function Foo(){}
Foo.prototype = 'A';
var foo = new Foo();

// foo inherits directly from Object.prototype, not Foo
console.log(Object.getPrototypeOf(foo) == Object.prototype) // true

// foo also inherits constructor property from Object.prototype
console.log(foo.constructor == Object)  // true

我设置了这样的构造函数：

[{
    "id": "0",
    "service": "Haircut"
}, {
    "id": "1",
    "service": "Brian"
}, {
    "id": "2",
    "service": "Cut&Shave"
}, {
    "id": "3",
    "service": "Beard Trim"
}, {
    "id": "4",
    "service": "Senior Citizen Haircut"
}, {
    "id": "5",
    "service": "Crew Cut"
}, {
    "id": "6",
    "service": "Fade"
}, {
    "id": "7",
    "service": "Line Up"
}, {
    "id": "8",
    "service": "Kids Cut"
}, {
    "id": "9",
    "service": "Long Hair Cut"
}]

我的API调用在这里：

constructor(props) {
    super(props);

    this.state = {
      damping: 1 - 0.6,
      tension: 400,
      dataBlob: [],
    dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}),
     showInput:false
    };

  }

这是我设置状态的地方，除了新渲染之外：

componentDidMount() {

    fetch('http://54.152.253.14/barbershop/appointmentHelper.php')
    .then((response) => response.json())
    .then((responseData) => {
      this.state.dataBlob = this.state.dataBlob.concat(responseData);
      console.log(responseData);
      this.setState({
          dataSource:this.state.dataSource.cloneWithRows(this.state.dataBlob),
          isLoading: false,
        });
    })
    .done();
  }
   My RenderSectionHeader is:

  renderSectionHeader(){
    console.log('render Section called');
  if(this.state.showInput){
    return (
      <View style={styles.section}>
       <Header headerText='Wills Barbershop'/>
       <Input onSubmitEditing={(event)=>this.editServices(event)}
      placeholder={'Enter a new service'}
        />
      </View>
      )
    }
    return (
      <View style={styles.section}>
       <Header headerText='Wills Barbershop'/>
      <FloatingButton onPress={() => this.showInput()}>
      </FloatingButton>
      </View>
    )

  }

我的ListView在这里：

  showInput(){
 console.log('show Input');
  this.setState({
    showInput:!this.state.showInput,
  })
}

非常感谢任何帮助。

Answer 1

我认为您遇到问题的原因是因为您没有正确使用renderSectionHeader。您的数据不会被分成几个部分，它只是一个大的数据（完全没问题）。我认为你最好调整渲染逻辑，以便典型的渲染逻辑可以在React Native中运行（而不是在ListView内部进行检查）。

这样做会留下以下内容 - 您可能需要进行适当的样式更改，但概念是相同的。

render() {
  return (
    <View>
      {this.renderSectionHeader()}
      <ListView
        key={this.state.dataBlob}
        dataSource={this.state.dataSource}
        renderRow={(data, sectionID, rowID) => this.renderList(data, sectionID, rowID)}
        style={styles.listView}
        renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
      />
    </View>
  );
}

希望对你有用！

ListView RenderSectionHeader无法使用json get或小于9正确呈现

1 个答案: