时间戳

首页 > 解决方案 > 反应原生显示布局

react-native - 反应原生显示布局

问题描述

请问你能帮我吗？我试图做这样的布局，从一开始就会有摄像头，但是如果我单击按钮驱动信息，它将被替换，这是我想要的布局，这是我的代码。现在所有可触摸的高亮（按钮）都在覆盖，+ 相机窗口应该是来自树莓派相机的直播，但现在我只关注布局。 

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,
}

});

在此处输入图像描述

标签： react-nativeandroid-layoutviewreact-native-android

解决方案

这应该没问题：

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 和孩子 2 将占据屏幕大小的 50%。如果我们希望孩子 1 占据屏幕的 66%，我们只需添加flex: 2。就像告诉 React “嘿，我希望你将屏幕分成 3 个相等的部分，当孩子 2 只占 1 个时，孩子 1 占据屏幕的 2 个部分”。请记住，这仅在您的父母设置了 flex 时才有效。

推荐阅读