Получение измерений элементов пользовательского интерфейса в React Native

Question

Есть ли способ получить измерения пикселей нативных элементов в React Native? Например:

Сейчас я жестко прописывать, сколько обивка должна существовать так, чтобы содержание не охватывается навигационной панели:

const styles = StyleSheet.create({ 
    container: { 
    paddingTop: 64 
    } 
}); 

ИМО это не приемлемо. Есть ли способ измерить эти элементы?

Answer 1

Да, вы можете использовать onLayout событие:

getInitialState() { 
    return { } 
} 

<View onLayout={(event) => this.measureView(event)}> 

measureView(event) { 
    console.log('event properties: ', event); 
    this.setState({ 
     x: event.nativeEvent.layout.x, 
     y: event.nativeEvent.layout.y, 
     width: event.nativeEvent.layout.width, 
     height: event.nativeEvent.layout.height 
    }) 
} 

Насколько называя их на коренных элементов, я не пробовал, но, возможно, передавая функцию в компонент может сделать это, или оберточной родной элемент в представлении и вызов функции на внешнем виде.