Реагировать на родную раскладку дисплея - PullRequest
Новая
       16

Реагировать на родную раскладку дисплея

0 голосов
/ 18 апреля 2020

Пожалуйста, вы можете мне помочь? Я пытаюсь сделать макет, как это, с самого начала будет камера, но если я нажму кнопку вождения информации, он будет заменен этим, вот макет, который я хочу, и вот мой код. Прямо сейчас все сенсорные хайлайты (кнопки) наложены, + окно камеры должно быть в прямом эфире с Raspberry Pi камеры, но сейчас я сосредоточен только на макете. 

const MainScreen = () => {
return(
<View>
  <View style={{flex: 33, flexDirection: 'row', justifyContent: 'flex-start', position: 'relative'}}>
    <TouchableHighlight style={styles.button} >
        <Text style={styles.txt}> CAMERA </Text>
    </TouchableHighlight> 
  </View>
  <View style={{flex: 33, flexDirection: 'row', justifyContent: 'center', position: 'relative'}}>
    <TouchableHighlight style={styles.button} >
        <Text style={styles.txt}> Lane assistant </Text>
    </TouchableHighlight>
    <TouchableHighlight style={styles.button} >
        <Text style={styles.txt}> disconnect </Text>
    </TouchableHighlight>
    <TouchableHighlight style={styles.button} >
        <Text style={styles.txt}> driving info </Text>
    </TouchableHighlight>
  </View>
  <View style={{flex: 33, flexDirection: 'row', justifyContent: 'flex-end', position: 'relative'}}>
    <TouchableHighlight style={styles.button} >
        <Text style={styles.txt}>- </Text>
    </TouchableHighlight>
    <TouchableHighlight style={styles.button} >
        <Text style={styles.txt}> cruise control </Text>
    </TouchableHighlight>
    <TouchableHighlight style={styles.button} >
        <Text style={styles.txt}>+ </Text>
    </TouchableHighlight>
  </View>

</View>
);

} 

const styles = StyleSheet.create({

 button:{
  justifyContent: 'space-between',

},
txt:{
  fontSize: 30,
}

});

enter image description here

1 Ответ

1 голос
/ 19 апреля 2020

Это должно быть хорошо: 

export default function App() {
  return (
<View style={{flex: 1}}>
  <View style={styles.topContainer}>
    <TouchableHighlight  >
        <Text> CAMERA </Text>
    </TouchableHighlight> 
  </View>
  <View style={{flex: 1}}>
    <View style={styles.buttonRowContainer}>
    <TouchableHighlight style={styles.touchableContainer} >
        <Text > Lane assistant </Text>
    </TouchableHighlight>
    <TouchableHighlight style={styles.touchableContainer} >
        <Text>disconnect </Text>
    </TouchableHighlight>
    <TouchableHighlight style={styles.touchableContainer} >
        <Text  > driving info </Text>
    </TouchableHighlight>
  </View>
  <View style={styles.buttonRowContainer}>
    <TouchableHighlight style={styles.touchableContainer} >
        <Text  >- </Text>
    </TouchableHighlight>
    <TouchableHighlight style={styles.touchableContainer} >
        <Text  > cruise control </Text>
    </TouchableHighlight>
    <TouchableHighlight style={styles.touchableContainer} >
        <Text >+ </Text>
    </TouchableHighlight>
  </View>
  </View>
</View>
  );
}

const styles = StyleSheet.create({
  buttonRowContainer: {
flex: 1, flexDirection: 'row'
  },
  touchableContainer: {
    flex: 1, justifyContent: 'center', alignItems: 'center'
  },
  topContainer: {
    flex: 1, justifyContent: 'center', alignItems: 'center'
  }
})

Я собираюсь объяснить, как работает flex. Если у вас есть только один элемент с flex: 1, он займет все пространство экрана. Обычно это делается, когда у вас есть вид, который будет содержать все остальные элементы. Если мы хотим разделить экран на два, мы должны определить 2 компонента с flex: 1

 - Main -> flex: 1
   - Children 1 -> flex: 1
   - Children 2 -> flex: 1

Дети 1 будут занимать 50% размера экрана, а также Дети 2. Если мы хотим дети 1 чтобы занять 66% экрана мы просто добавляем flex: 2. Это все равно, что сказать React: «Эй, я хочу, чтобы ты разделил экран на 3 равные части. Дети 1 занимают 2 части экрана, а Дети 2 - только 1». Помните, что это будет работать, только если ваш родитель установил flex.

...