我希望我的视图适合 React Native 中的所有屏幕
I want my view to fit all the screen in React Native
我正在尝试为我正在制作的应用程序设置背景颜色,但它不适合所有屏幕,而且它的底部也不采用这种风格。
这是我的代码:
<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,
},
<Image style={{ flex: 1, height: 80, width: 80, alignSelf: 'center', marginTop: 23 }}
resizeMode: 'stretch', // or 'cover' . <<------------------
source={require('./../src/img/profile.png')} />
<ScrollView>
必须在 <View style={styles.main}>
内
所以
<View style={styles.main}>
<ScrollView>
<View>
// .........
</View>
</ScrollView>
</View>
另一种使视图适合所有屏幕的方法是使用绝对定位,并使所有左、上、右和下均为 0。
这是一个例子。
<View style={{ position : 'absolute', top : 0, left : 0, right : 0,bottom : 0,}}</View>
我正在尝试为我正在制作的应用程序设置背景颜色,但它不适合所有屏幕,而且它的底部也不采用这种风格。
这是我的代码:
<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,
},
<Image style={{ flex: 1, height: 80, width: 80, alignSelf: 'center', marginTop: 23 }}
resizeMode: 'stretch', // or 'cover' . <<------------------
source={require('./../src/img/profile.png')} />
<ScrollView>
必须在 <View style={styles.main}>
所以
<View style={styles.main}>
<ScrollView>
<View>
// .........
</View>
</ScrollView>
</View>
另一种使视图适合所有屏幕的方法是使用绝对定位,并使所有左、上、右和下均为 0。
这是一个例子。
<View style={{ position : 'absolute', top : 0, left : 0, right : 0,bottom : 0,}}</View>