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中的所有屏幕

3 个答案: