React native 反应本机显示布局

你能帮我吗？我试图这样做布局，从一开始就会有摄像头，但如果我点击按钮驾驶信息，它将被取代，这是我想要的布局，这是我的代码。现在所有可触摸的HighlitsButtons都是重叠的，+摄像头窗口应该是raspberry pi摄像头的livestream，但现在我只关注布局

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>
);

})

这应该可以：

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'
  }
})

---

儿童1和儿童2将占据屏幕大小的50%。如果我们想让儿童1占据66%的屏幕，我们只需添加flex:2。就像告诉React嘿，我想让你把屏幕分成3等分，当孩子2只取1时，孩子1取屏幕的2部分。请记住，只有当您的家长设置了flex时，这才有效。

这太笼统了，请指定是什么导致了问题，发生了什么与预期的情况。提及您尝试过的内容，等等。我想要3行，第一行显示摄像头/驾驶信息，第二行和第三行显示可触摸的Highlight按钮。根据照片的布局，我很难把它们放在屏幕上。现在所有的按钮都覆盖了

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'
  }
})

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