反应本机显示布局

Question

你能帮帮我吗？我试图做这样的布局，从一开始就会有摄像头，但如果我点击按钮驱动信息，它将被替换，这是我想要的布局，这是我的代码。现在所有可触摸的高光（按钮）都在叠加，+ 相机 window 应该是来自 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,
}

});

Answer 1

这应该没问题：

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，它将占据整个屏幕 space。当您有一个包含所有其他元素的视图时，通常会这样做。如果我们想将屏幕一分为二，我们必须用 flex: 1

定义 2 个组件

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

Children 1 和 Children 2 将占据屏幕大小的 50%。如果我们希望 children 1 占据屏幕的 66%，我们只需添加 flex: 2。就像告诉 React "hey, I want you to divide the screen in 3 equal parts, Children 1 takes 2 portions of the screen when Children 2 only takes 1"。请记住，这仅在您的 parent 设置了 flex.

时才有效

反应本机显示布局

React native display layout

view

android-layout

react-native

react-native-android