TLDR: maxHeight: 50% == 50%screenHeight не 50%windowHeight, как я ожидал. Решено с помощью react.Dimensions & Listeners для удаленного изменения размера
Хорошо, поэтому, хотя не многие люди видели этот пост, и, возможно, никогда не увидят, я обнаружил свою проблему.
Итак, быстрое объяснение рабочего процесса, который я использую:
Использование React-Native Я динамически обновляю контент для мобильных, веб-сайтов и настольных приложений. Это осуществляется с помощью Экспо и Электрон. Подробнее об этом можно узнать здесь: https://docs.expo.io/versions/v36.0.0/guides/using-electron/
Исследования / открытия
Так что я потратил много времени играть с классами, стилями и другими методами рендеринга, пока я в итоге не попал на настройку стиля maxHeight. Установив для этого 50%, я ожидал, что элемент будет 50% окна. Однако это был не тот случай.
Это быстро приводит к пониманию того, что реакция решила найти высоту экрана, а не высоту окна ...
Теперь к решению.
Чтобы решить, было не так просто, как я изначально думал, из-за рабочего процесса, который я использую, есть несколько препятствий, которые я уже знать, когда дело доходит до использования electron/remote. К счастью, это решается простым дополнительным файлом с именем *.electron.tsx. Вот как я это сделал.
//global.tsx - Lines commented out are included in global.electron.tsx
import React from 'react';
import { Platform, Text, View, Image, Dimensions } from 'react-native';
import * as styles from '../assets/styles/main'
import { Example } from './chat/example'
import { ChannelSelect } from './channels/select'
import { ChannelOptions } from './channels/options'
// let remote, win
// try { remote = require('electron').remote }catch(_){}
// try { win = remote.getCurrentWindow() }catch(_){}
export class Container extends React.Component {
state = {
showMenu: false,
style: {},
height: Dimensions.get("window").height,
width: Dimensions.get("window").width
}
handler = (dims:any) => this.setState(dims);
// logger = () => {
// const winHeight = win.getSize()[1];
// this.setState({height: winHeight});
// };
constructor (props) {
super(props);
this.handleToggleClick = this.handleToggleClick.bind(this);
this.TopBar = this.TopBar.bind(this);
}
componentDidMount() {
Dimensions.addEventListener("change", this.handler);
// win.on("will-resize", this.logger)
if (Platform.OS !== 'web') {
this.setState({
style: {position: 'absolute', zIndex: 2, left: 0, top: 0, borderRightWidth: 3, borderColor: styles.colours.b5}
})
}
}
componentWillUnmount() {
Dimensions.removeEventListener("change", this.handler);
}
async handleToggleClick (){
if (this.state.showMenu) {
this.setState({showMenu: false})
} else {
this.setState({showMenu: true })
}
}
TopBar (props) {
return (
<View key="ChannelContentTopBar" style={styles.global.topBar} >
{
Platform.OS!=='web' ? ([
<View onTouchEnd={this.handleToggleClick} style={{flex: 1, marginLeft: 10, alignContent: 'flex-start', justifyContent: 'flex-start'}}>
<Image source={require('../assets/img/icon.png')} style={{height:50, width:50}}/>
</View>,
<View style={{flex: 3, alignContent: 'center', justifyContent: 'center'}}>
<Image source={require('../assets/img/logo_sub.png')} style={{height:30, width: 150, alignSelf: 'center'}}/>
</View>,
<View style={{flex: 1, alignContent: 'flex-end', justifyContent: 'flex-end'}} />
]) : null
}
</View>
)
}
render() {
const {height, width} = this.state;
// const {height, width} = this.state;
// let containHeight: number
// if (Platform.OS=='web') {containHeight = height-20}else{containHeight = height}
return (
<View key="container" style={[styles.global.container, {maxHeight: height, maxWidth: width}]}>
{ this.state.showMenu || Platform.OS=='web' ? ( [
<View key="selectContainer" style={[styles.channels.Container, this.state.style]}>
<ChannelSelect />
<ChannelOptions />
</View>
]) : null }
{
this.state.showMenu && Platform.OS!=='web' ? (
<View key="mainContent" style={styles.global.mainContent} onTouchEnd={this.handleToggleClick}>
<this.TopBar />
<Example />
</View>
) : (
<View key="mainContent" style={styles.global.mainContent}>
<this.TopBar />
<Example />
</View>
)
}
</View>
)
}
}
Я уверен, что есть лучший и более аккуратный способ сделать это, но сейчас это работает и делает то, что мне нужно это делать. Если я улучшу этот код, я обновлю сценарии и оставлю заметку. Теперь я наконец-то могу приступить к решению некоторых проблем со стилем. XD
Отредактируйте одно: чтобы оптимизировать мой код, я перемещаю все это в свой глобальный контейнер, чтобы один раз определить размер окна.