React Native Flexbox中的宽度为100％

7 回答

• 304

  只需将 alignSelf: "stretch" 添加到项目的样式表中即可 .

  line1: {
      backgroundColor: '#FDD7E4',
      alignSelf: 'stretch',
      textAlign: 'center',
  },
  

  回复于 2024-04-26T17:55:58+08:00
• 4

  你应该使用Dimensions

  首先，定义Dimensions .

  import { Dimensions } from "react-native";
  
  var width = Dimensions.get('window').width; //full width
  var height = Dimensions.get('window').height; //full height
  

  然后，改变 line1 样式，如下所示：

  line1: {
      backgroundColor: '#FDD7E4',
      width: width,
  },
  

  回复于 2024-04-26T17:55:58+08:00
• 3

  Editted:

  为了仅展示中心文本，可以采取不同的方法 - Unflex the other views.

  • 让flexDirection保持'column'

  • 从容器中删除 alignItems : 'center'

  • 将 alignSelf:'center' 添加到您不想弯曲的文本视图中

  您可以将Text组件包装在View组件中，并将View的flex设置为1 .

  flex将给出：

  如果style.container中的 flexDirection:'row' ，则为100％宽度

  如果style.container中的 flexDirection:'column' ，则为100％高度

  回复于 2024-04-26T17:55:58+08:00
• 1

  使用javascript获取宽度和高度，并以View的样式添加它们 . 要获得完整的宽度和高度，请使用 Dimensions.get('window').width https://facebook.github.io/react-native/docs/dimensions.html

  getSize() {
      return {
          width: Dimensions.get('window').width, 
          height: Dimensions.get('window').height
      }
  }
  

  然后，

  <View style={[styles.overlay, this.getSize()]}>
  

  回复于 2024-04-26T17:55:58+08:00
• 87

  首先添加Dimension组件：

  import { AppRegistry, Text, View,Dimensions } from 'react-native';
  

  第二个定义变量：

  var height = Dimensions.get('window').height;
  var width = Dimensions.get('window').width;
  

  第三个把它放在你的样式表中：

  textOutputView: {
      flexDirection:'row',
      paddingTop:20,
      borderWidth:1,
      borderColor:'red',
      height:height*0.25,
      backgroundColor:'darkgrey',
      justifyContent:'flex-end'
  }
  

  实际上在这个例子中我想做出响应式视图，并且只想查看0.25的屏幕视图，所以我将它乘以0.25，如果你想要100％的屏幕不要将它与任何这样的东西相乘：

  textOutputView: {
      flexDirection:'row',
      paddingTop:20,
      borderWidth:1,
      borderColor:'red',
      height:height,
      backgroundColor:'darkgrey',
      justifyContent:'flex-end'
  }
  

  回复于 2024-04-26T17:55:58+08:00
• 0

  注意：尝试充分了解flex概念 .

  <View style={{
            flex: 2,
            justifyContent: 'center',
            alignItems: 'center'
          }}>
            <View style ={{
                flex: 1,
                alignItems: 'center, 
                height: 50, 
                borderWidth: 1, 
                borderColor: '#000' 
            }}>
                 <Text>Welcome to React Nativ</Text>
             </View>
             <View style={{
                flex: 1,
                alignItems: 'center,
                borderWidth: 1, 
                borderColor: 'red ', 
                height: 50
              }}
              >
                <Text> line 1 </Text>
              </View>
            <View style={{
              flex: 1,
              alignItems: 'center, 
              height: 50, 
              borderWidth: 1,                     
              borderColor: '#000'
            }}>
               <Text>
                Press Cmd+R to reload,{'\n'}
                Cmd+D or shake for dev menu
               </Text>
             </View>
         </View>
  

  回复于 2024-04-26T17:55:58+08:00
• 21

  Here you go:

  只需更改line1样式，如下所示：

  line1: {
           backgroundColor: '#FDD7E4',
           width:'100%',
           alignSelf:'center'
         }
  

  回复于 2024-04-26T17:55:58+08:00