react-native - 在循环内起诉时，不会为正确的项目调用 onLayout

Question

我在循环中渲染项目，我需要获取每个项目的 Y 位置，以便我可以使用 scrollTo()稍后滚动到该位置。
问题是似乎onLayout没有正确调用所以我得到了错误的项目位置。
示例项目:

A,B,C,D

但我有时会为 A 存储位置，有时为 C 等。
我怎样才能同步这个？

this.props.list.map((item, index) => {
   return (
      <TouchableOpacity
        onLayout={(event) => {
          let {x, y, width, height} = event.nativeEvent.layout;
....

更新
这是完整的代码。所以你看我设置了我在 onLayout 中找到的第一个国家/地区索引.所以当我按下 乙 它应该滚动到 的位置巴哈马 但有时它会滚动到 巴哈马 有时到 巴巴多斯 有时到 不丹 ...

const countries = ["Afghanistan", "Albania", "Algeria", "American Samoa", "Andorra", "Angola", "Anguilla", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Aruba", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan"];

export default class App extends Component {

  constructor(props, context) {
    super(props, context);

    this.state = {
      currentLetter: "A",
    };

    this.sections = {}
  }

onLetter(letter) {
    this.setState({currentLetter: letter});
    if (this.sections[letter]) {
      this.scrollView.scrollTo({ y: this.sections[letter] });
    }
  }

<ScrollView ref={ref => this.scrollView = ref}>
          {
            countries.map((item) => {
              return (
                <View onLayout={(event) => {
                  var {x, y, width, height} = event.nativeEvent.layout;
                    if (!this.sections[item[0]]) {
                      this.sections[item[0]] = y;
                    }
                  }}
                  style={{backgroundColor: "#f0aabb", padding: 10, margin: 5}}>
                  <Text>{item}</Text>
                </View>
              )
            })
          }
        </ScrollView>

Answer 1

我认为onLayout不按顺序进行。所以不确定巴哈马是否会先走。

我认为您应该为映射字母和起始/指向项目创建一个 func，例如: 'A' = 'Afghanistan', 'B' = 'Bahamas'

您可以对其进行硬编码(不推荐，只需解释一下想法)

dataSource = { 'Afghanistan': 'A', 'Bahamas': 'B'}
// implement this func base on your rules for title and letter
getLetterFromTitle(title) {
  return dataSource[title];
} 

然后 onLayout

const letter = getLetterFromTitle(item);
if (letter && !this.sections[letter]) {
  this.sections[letter] = y;
}