React Native获取平面列表索引

时间:2020-02-09 09:47:17

标签: reactjs react-native react-native-flatlist

我在flatlist中使用flatlist,我想获取我使用的第一个flatlist的索引
下面的代码:

<FlatList
  data ={this.state.data}
  renderItem = {(item, index1)=>
    <View>
      <FlatList
        data = {this.state.data2}
        renderItem = {(item, index2) => 
          console.log("parent_index",index1);
          console.log("child_index",index2);
        }
      />
    </View>
  }

如何获取index1?
我在上面的代码中所做的是不确定的。

3 个答案:

答案 0 :(得分:2)

第一份平面清单的代码

render() {
    return (
        <View style={{ height: "100%", width: "100%", backgroundColor: 'red' }}>
          <FlatList
            data={this.state.data}
            renderItem={({ item, index }) => {
              return (
                this.renderSecondFlatlist(index)
              );

            }
            }
          />
        </View>
    )
  }

第二个FlatList的代码,您将在其中传递第一个FlatList的“索引”

 renderSecondFlatlist(index1) {
        return (
          <View style={{ flex: 1, backgroundColor: 'pink' }}>

            <FlatList
              data={this.state.data2}
              renderItem={(item, index2) => {
                /*return (
                  <Text>{index1}</Text>
                );*/
                console.log("index:-",index1);
              }
              }
            />
          </View>
        );
      }

答案 1 :(得分:1)

您需要onPress将获得索引的处理程序,例如:

onPress = {()=> this.getItem(index)} 和处理程序:

getItem = index => this.setState(prevState =>({{selectedByIndex:[index,... prevState.selectedByIndex]})

答案 2 :(得分:1)

您应该使用FlatList的keyExtractor属性。

export class TimeSeriesFormStrategy extends FormStrategyDruidBase {
  constructor(
    protected dashboardService: DashboardService,
    protected i18nService: I18NService,
    protected filterSelectService: FilterSelectService,
    protected formBuilder: FormBuilder
  ) {
    super(DashboardWidget.TypeEnum.TimeLines, dashboardService, i18nService, filterSelectService, formBuilder);

    this.basicSteps = [
相关问题