Reactjs 当存在'；s仅在其他组件上进行布局

我有一个由按钮和一个

FlatList

组成的屏幕。按钮有

onLayout（）

侦听器来测量其

borderRadius

，其动态值取决于其宽度

const [buttonFilterStyle, setButtonFilterStyle] = useState({});
const buttonFilterOnLayout = (event) => {
  const {width} = event.nativeEvent.layout;
  const style = {borderRadius: width / 2};
  setButtonFilterStyle(style);
};
const TabScene = () => (
  <View style={{flex: 1, paddingHorizontal: 12, paddingTop: 12}}>
    <View style={{flexDirection: 'row', paddingVertical: 12}}>
      <Button
        onLayout={buttonFilterOnLayout}
        mode="contained"
        style={[
          styles.buttonFilter,
          styles.buttonFilterActive,
          buttonFilterStyle,
          {marginRight: 8},
        ]}
        contentStyle={{padding: 10}}
        labelStyle={[styles.buttonFilterLabel, {color: colors.primary}]}
        uppercase={false}>
        Belum Terbayar
      </Button>
    </View>
    <FlatList
      showsVerticalScrollIndicator={false}
      data={dummyData}
      renderItem={renderItem}
      keyExtractor={(item, index) => `${index}`}
    />
  </View>
);

const[buttonFilterStyle，setButtonFilterStyle]=useState（{}）；
常量按钮FilterOnlyLayout=（事件）=>{
const{width}=event.nativeEvent.layout；
常量样式={borderRadius:width/2}；
setButtoFilterStyle（样式）；
};
const TabScene=（）=>(
贝勒姆·特巴亚尔
`${index}`}
/>
);

但是，显然，这个

onLayout

侦听器影响了

FlatList

的滚动状态，导致它在每次我进行滚动时重置滚动位置。如何解决这个问题