我希望我的视图适合 React Native 中的所有屏幕

Question

我正在尝试为我正在制作的应用程序设置背景颜色，但它不适合所有屏幕，而且它的底部也不采用这种风格。

这是我的代码：

  <ScrollView>
    <View style={styles.main}>
      <View style={{ marginTop: 10 }}>
        <Image style={{ flex: 1, height: 80, width: 80, alignSelf: 'center', marginTop: 23 }}
          source={require('./../src/img/profile.png')} />
      </View>
      <View style={styles.fourblock}>
        <TouchableOpacity
          style={styles.redbox}
          onPress={() => Actions.personal()}>
          <Text style={styles.redboxText}>
            Personal Detail
              </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.redbox}
          onPress={() => Actions.savedschools()}>
          <Text style={styles.redboxText}>
            Saved Schools
             </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.redbox}
          onPress={() => Actions.languages()}>
          <Text style={styles.redboxText}>
            Your Reviews
            </Text>
        </TouchableOpacity>
      </View>
    </View>
  </ScrollView>

这是我要放置的样式：

  main: {
    //marginTop: 52,
    backgroundColor: '#F8F8FF',
    flex: 1,
  },

Answer 1

<Image style={{ flex: 1, height: 80, width: 80, alignSelf: 'center', marginTop: 23 }}
    resizeMode: 'stretch', // or 'cover' . <<------------------
    source={require('./../src/img/profile.png')} />

Answer 2

<ScrollView> 必须在 <View style={styles.main}>

内

所以

<View style={styles.main}>
 <ScrollView>
  <View>
   // .........
  </View>
 </ScrollView>
</View>

Answer 3

另一种使视图适合所有屏幕的方法是使用绝对定位，并使所有左、上、右和下均为 0。

这是一个例子。

<View style={{ position : 'absolute', top : 0, left : 0, right : 0,bottom : 0,}}</View>

我希望我的视图适合 React Native 中的所有屏幕

I want my view to fit all the screen in React Native

reactjs

view

native