首先添加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'
}

给你:

只需更改line1样式如下所示:

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

只需删除容器样式中的alignItems: 'center'，并添加textAlign: "center"到line1样式，如下所示。

效果会很好

container: {
  flex: 1,
  justifyContent: 'center',
  backgroundColor: '#F5FCFF',
  borderWidth: 1,
}

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

简单地使用width:'100%'

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

width: '100%'和alignSelf: 'stretch'不适合我。维度不适合我的任务，因为我需要在深度嵌套的视图上操作。这是对我有效的方法，如果我重写你的代码。我只是添加了一些视图，并使用flex属性来实现所需的布局:

  {/* a column */}
  <View style={styles.container}>
    {/* some rows here */}
    <Text style={styles.welcome}>
      Welcome to React Natives
    </Text>
    {/* this row should take all available width */}
    <View style={{ flexDirection: 'row' }}>
      {/* flex 1 makes the view take all available width */}
      <View style={{ flex: 1 }}>
        <Text style={styles.line1}>
          line1
        </Text>
      </View>
      {/* I also had a button here, to the right of the text */}
    </View>
    {/* the rest of the rows */}
    <Text style={styles.instructions}>
      Press Cmd+R to reload,{'\n'}
      Cmd+D or shake for dev menu
    </Text>
  </View>

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

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