反应本机显示布局

Question

请您能帮我吗？我试图做这样的布局，从一开始就会有摄像头，但是如果我单击按钮驾驶信息，它将被替换为，这是我想要的布局，这是我的代码。现在所有的touchablehighlits（按钮）都被覆盖，+相机窗口应该是树莓派相机的实时流，但是现在我只关注布局。

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

这应该没问题：

MatchObject.group(0)

我将解释flex的工作原理。如果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' } }) 仅包含一个元素，它将占用所有屏幕空间。通常，当您拥有一个包含所有其他元素的View时，便可以完成此操作。如果要将屏幕一分为二，则必须使用flex: 1

定义2个组件

flex: 1

儿童1将占据屏幕尺寸的50％，而儿童2将占据屏幕尺寸的50％。如果我们希望儿童1占据屏幕的66％，我们只需添加 - Main -> flex: 1 - Children 1 -> flex: 1 - Children 2 -> flex: 1 。就像告诉React“嘿，我希望您将屏幕分成三个相等的部分，当孩子2仅占1时，孩子1占屏幕的2个部分”。请记住，这仅在您的父母设置了flex时才有效。