通过 React Native 进行组件叠加
Component Overlay via React Native
我正在尝试实现以下目标（标题组件位于标题图片和组件 body 的中间）：
但目前看来我能做的最好的就是利用模态组件进行叠加。但是，这并不是最佳选择，因为当用户滑动返回提要时，模态窗口会延迟退出。关于如何使用视图实现这种类型的布局有什么想法吗？
这是我的代码：
var React = require('react-native');
var {
View,
Image,
StyleSheet,
Text,
Modal,
ScrollView,
AsyncStorage
} = React;
//additional libraries
var Parse = require('parse/react-native');
//var Reflux = require('reflux');
//dynamic component references
var Api = require('../../utils/api');
//libraries
//dimensions
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
var HTMLView = require('react-native-htmlview');
var ImageButton = require('../../common/imageButton');
module.exports = React.createClass({
componentDidMount: function() {
},
componentWillMount: function() {
Parse.User.currentAsync()
.then((user) => { this.setState({user: user}); })
},
getInitialState: function() {
return {
entry: null,
}
},
render: function() {
return (
<ScrollView contentContainerStyle={styles.container}>
<View style={[styles.header, this.border('red')]}>
<Image source={{uri:'http://blameebro.com/wp-content/uploads/2015/07/kdot-alright-video.png' }} style={[styles.entryImage]}>
<Modal
animated={false}
transparent={true}
visible={true}>
<View style={[styles.headerTopRow, this.border('yellow'), styles.overlay]}>
<Text style={styles.titleText}>These 3 Black Comedians Are Finally Being Honored For The Ways They Paved & The History They Made</Text>
</View>
</Modal>
</Image>
</View>
<View style={[styles.footer, this.border('blue')]}>
<View style={[styles.footerTopRow, this.border('red')]}>
<View style={styles.group}>
<ImageButton
style={[styles.btn]}
resizeMode={'contain'}
onPress={this.onPressSite}
source={require('../../img/globe-details.png')} />
<Text style={styles.sideText}>codeblackreport.com</Text>
</View>
<View style={styles.group}>
<ImageButton
style={[styles.btn]}
resizeMode={'contain'}
onPress={this.onPressFave}
source={require('../../img/check-details.png')} />
<Text style={styles.sideText}>2.6k favorites</Text>
</View>
</View>
<Image
style={[styles.loginBar]}
resizeMode={'contain'}
source={require('../../img/login_bar_3x.png')} />
<View style={[styles.content, this.border('blue')]}>
<HTMLView
style={{backgroundColor:'color'}}
value={'<p>A <a href="http://www.benedelman.org/publications/airbnb-guest-discrimination-2015-12-09.pdf">working paper</a> (pdf) from Harvard Business School released Wednesday found “widespread discrimination” by hosts against people with black-sounding names seeking home rentals, <a href="http://www.nytimes.com/2015/12/12/business/discrimination-by-airbnb-hosts-is-widespread-report-says.html">reports the New York Times</a>.</p>'}
stylesheet={styles_two} />
</View>
</View>
</ScrollView>
);
},
border: function(color) {
return {
//borderColor: color,
//borderWidth: 4,
}
},
onPressFave: function() {
},
onPressSite: function() {
},
});
var styles_two = StyleSheet.create({
p: {
color:'white',
fontSize: 12,
fontWeight: '200',
fontFamily: 'arial',
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'transparent',
},
footer: {
flex: 2,
backgroundColor: '#222222',
height: window.height/3.5,
width: window.width,
alignItems: 'center',
},
header: {
flex: 1,
},
entryImage: {
height: window.height/3,
width: window.width,
},
loginBar: {
width: (window.width/1.3)/1.8,
height: (70/553)*((window.width/1.3)/1.8),
marginTop: -10,
},
barHolder: {
backgroundColor: "#222222",
},
content: {
flex: 5,
marginLeft: window.width/40,
marginRight: window.width/40,
marginTop: window.height/40,
},
headerTopRow: {
width: window.width/1.2,
backgroundColor: '#1C1C1A',
alignItems: 'flex-end',
alignSelf: 'center',
opacity: 0.6,
marginTop: (window.height/3)*(4/5),
},
footerTopRow: {
flex: 1,
flexDirection: "row",
justifyContent: 'space-around',
width: window.width,
height: window.height/15,
marginTop: (window.height/10),
},
group: {
flexDirection: "row",
justifyContent: 'space-between',
alignItems: 'center',
},
btn: {
width: window.width/20,
height: window.width/20,
},
sideText: {
color:'white',
fontSize: 12,
fontFamily: 'arial',
margin: 10,
alignSelf: 'center',
},
titleText: {
fontFamily: 'Bebas Neue',
fontSize: 20,
padding: 6,
color: 'white',
letterSpacing: 1,
textAlign: 'center'
},
});
以及现在的样子：
您试过在标题上使用负边距吗？
<View style={[styles.header, this.border('red')]}>
<Image source={{uri:'http://blameebro.com/wp-content/uploads/2015/07/kdot-alright-video.png' }} style={[styles.entryImage]}/>
<View style={[styles.headerTopRow, this.border('yellow'), styles.overlay]}>
<Text style={styles.titleText}>These 3 Black Comedians Are Finally Being Honored For The Ways They Paved & The History They Made</Text>
</View>
</View>
然后在样式中：
headerTopRow: {
marginTop: -50,
},
这不是你想做的吗？:
var {
StyleSheet,
View,
Text,
ScrollView,
AppRegistry,
Image,
} = React;
import Dimensions from 'Dimensions';
var windowWidth = Dimensions.get('window').width;
var windowHeight = Dimensions.get('window').height;
var Main = React.createClass ({
render() {
return (
<View style={styles.container}>
<ScrollView style={styles.container} >
<Image
style={styles.entry}
source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
/>
<View style={styles.title}>
<Text style={styles.text}>These 3 Black Comedians Are Finally Being Honored For The Ways They Paved & The History They Made</Text>
</View>
<Text style={styles.text}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a metus vel nibh scelerisque tempor. Sed quis condimentum sem. Fusce malesuada ipsum blandit, consectetur risus non, sodales nulla. Aenean rhoncus erat nec metus dictum vulputate. Proin diam lectus, scelerisque a porttitor ut, pellentesque at ipsum. Nunc ut odio magna. In condimentum, dolor sit amet mollis suscipit, erat quam ornare risus, nec vulputate libero augue vitae augue. Nam bibendum in ante in vestibulum. Etiam leo dolor, egestas sit amet nulla et, auctor volutpat metus. Sed vel mauris vitae tellus vestibulum ullamcorper. Aliquam hendrerit sit amet ipsum sagittis ultricies.
Proin consequat, mi in tincidunt rutrum, augue lacus vehicula magna, eget dapibus dui neque non velit. Proin semper enim est, vitae molestie metus fermentum at. Maecenas a convallis metus. Nam bibendum tempor nunc eu rhoncus. Ut rutrum est vitae leo accumsan viverra. Nullam ex justo, hendrerit in placerat at, convallis et orci. Morbi quis convallis sapien, quis tempor dui. Maecenas tristique augue quis viverra volutpat. Donec vel nisi at dolor blandit porttitor ut non urna.
Nulla facilisi. Sed vel gravida velit, elementum vehicula lacus. Praesent luctus eget neque eget vehicula. Vestibulum diam urna, sagittis at velit at, fermentum luctus arcu. Sed sapien arcu, pellentesque a lorem quis, varius porttitor mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam rhoncus sollicitudin pretium. Aliquam eleifend turpis in posuere pellentesque. Vivamus viverra maximus lacus, sit amet cursus elit lobortis gravida. Quisque mollis velit quis dictum convallis. Vivamus non lectus auctor, blandit diam eu, lobortis odio. Nulla id pulvinar nulla.
Morbi et ex sagittis, pharetra dui ut, viverra augue. In commodo, libero nec pulvinar luctus, metus justo accumsan nisi, et congue dolor est a mauris. Mauris lacinia mi porta felis commodo, id finibus neque ullamcorper. Mauris ac ex at eros aliquam rutrum. Aenean venenatis quis neque non facilisis. Ut auctor, risus in laoreet bibendum, magna leo mollis turpis, a convallis mauris lorem sed nunc. Nulla et urna blandit, maximus lacus non, egestas sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Integer in justo in erat euismod volutpat. Nam eleifend auctor ornare. Sed commodo felis sed diam mattis vulputate. Nam cursus placerat nunc. Aliquam sem nunc, fringilla sagittis lorem quis, pulvinar rhoncus erat. Integer venenatis, nibh sed vulputate facilisis, mi eros aliquam neque, ac consectetur leo augue id lorem. Mauris efficitur aliquet neque sed sagittis. Donec et sapien nisl.</Text>
</ScrollView>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
backgroundColor: "#444",
flex: 1
},
text:{
color: "white",
margin: 16,
fontSize: 16,
},
title:{
backgroundColor: "rgba(0, 0, 0, .6)",
marginHorizontal: 30,
marginTop: -45,
},
entry: {
height: windowHeight/3,
width: windowWidth,
}
});
我正在尝试实现以下目标（标题组件位于标题图片和组件 body 的中间）：
但目前看来我能做的最好的就是利用模态组件进行叠加。但是，这并不是最佳选择，因为当用户滑动返回提要时，模态窗口会延迟退出。关于如何使用视图实现这种类型的布局有什么想法吗？
这是我的代码：
var React = require('react-native');
var {
View,
Image,
StyleSheet,
Text,
Modal,
ScrollView,
AsyncStorage
} = React;
//additional libraries
var Parse = require('parse/react-native');
//var Reflux = require('reflux');
//dynamic component references
var Api = require('../../utils/api');
//libraries
//dimensions
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
var HTMLView = require('react-native-htmlview');
var ImageButton = require('../../common/imageButton');
module.exports = React.createClass({
componentDidMount: function() {
},
componentWillMount: function() {
Parse.User.currentAsync()
.then((user) => { this.setState({user: user}); })
},
getInitialState: function() {
return {
entry: null,
}
},
render: function() {
return (
<ScrollView contentContainerStyle={styles.container}>
<View style={[styles.header, this.border('red')]}>
<Image source={{uri:'http://blameebro.com/wp-content/uploads/2015/07/kdot-alright-video.png' }} style={[styles.entryImage]}>
<Modal
animated={false}
transparent={true}
visible={true}>
<View style={[styles.headerTopRow, this.border('yellow'), styles.overlay]}>
<Text style={styles.titleText}>These 3 Black Comedians Are Finally Being Honored For The Ways They Paved & The History They Made</Text>
</View>
</Modal>
</Image>
</View>
<View style={[styles.footer, this.border('blue')]}>
<View style={[styles.footerTopRow, this.border('red')]}>
<View style={styles.group}>
<ImageButton
style={[styles.btn]}
resizeMode={'contain'}
onPress={this.onPressSite}
source={require('../../img/globe-details.png')} />
<Text style={styles.sideText}>codeblackreport.com</Text>
</View>
<View style={styles.group}>
<ImageButton
style={[styles.btn]}
resizeMode={'contain'}
onPress={this.onPressFave}
source={require('../../img/check-details.png')} />
<Text style={styles.sideText}>2.6k favorites</Text>
</View>
</View>
<Image
style={[styles.loginBar]}
resizeMode={'contain'}
source={require('../../img/login_bar_3x.png')} />
<View style={[styles.content, this.border('blue')]}>
<HTMLView
style={{backgroundColor:'color'}}
value={'<p>A <a href="http://www.benedelman.org/publications/airbnb-guest-discrimination-2015-12-09.pdf">working paper</a> (pdf) from Harvard Business School released Wednesday found “widespread discrimination” by hosts against people with black-sounding names seeking home rentals, <a href="http://www.nytimes.com/2015/12/12/business/discrimination-by-airbnb-hosts-is-widespread-report-says.html">reports the New York Times</a>.</p>'}
stylesheet={styles_two} />
</View>
</View>
</ScrollView>
);
},
border: function(color) {
return {
//borderColor: color,
//borderWidth: 4,
}
},
onPressFave: function() {
},
onPressSite: function() {
},
});
var styles_two = StyleSheet.create({
p: {
color:'white',
fontSize: 12,
fontWeight: '200',
fontFamily: 'arial',
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'transparent',
},
footer: {
flex: 2,
backgroundColor: '#222222',
height: window.height/3.5,
width: window.width,
alignItems: 'center',
},
header: {
flex: 1,
},
entryImage: {
height: window.height/3,
width: window.width,
},
loginBar: {
width: (window.width/1.3)/1.8,
height: (70/553)*((window.width/1.3)/1.8),
marginTop: -10,
},
barHolder: {
backgroundColor: "#222222",
},
content: {
flex: 5,
marginLeft: window.width/40,
marginRight: window.width/40,
marginTop: window.height/40,
},
headerTopRow: {
width: window.width/1.2,
backgroundColor: '#1C1C1A',
alignItems: 'flex-end',
alignSelf: 'center',
opacity: 0.6,
marginTop: (window.height/3)*(4/5),
},
footerTopRow: {
flex: 1,
flexDirection: "row",
justifyContent: 'space-around',
width: window.width,
height: window.height/15,
marginTop: (window.height/10),
},
group: {
flexDirection: "row",
justifyContent: 'space-between',
alignItems: 'center',
},
btn: {
width: window.width/20,
height: window.width/20,
},
sideText: {
color:'white',
fontSize: 12,
fontFamily: 'arial',
margin: 10,
alignSelf: 'center',
},
titleText: {
fontFamily: 'Bebas Neue',
fontSize: 20,
padding: 6,
color: 'white',
letterSpacing: 1,
textAlign: 'center'
},
});
以及现在的样子：
您试过在标题上使用负边距吗？
<View style={[styles.header, this.border('red')]}>
<Image source={{uri:'http://blameebro.com/wp-content/uploads/2015/07/kdot-alright-video.png' }} style={[styles.entryImage]}/>
<View style={[styles.headerTopRow, this.border('yellow'), styles.overlay]}>
<Text style={styles.titleText}>These 3 Black Comedians Are Finally Being Honored For The Ways They Paved & The History They Made</Text>
</View>
</View>
然后在样式中：
headerTopRow: {
marginTop: -50,
},
这不是你想做的吗？:
var {
StyleSheet,
View,
Text,
ScrollView,
AppRegistry,
Image,
} = React;
import Dimensions from 'Dimensions';
var windowWidth = Dimensions.get('window').width;
var windowHeight = Dimensions.get('window').height;
var Main = React.createClass ({
render() {
return (
<View style={styles.container}>
<ScrollView style={styles.container} >
<Image
style={styles.entry}
source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
/>
<View style={styles.title}>
<Text style={styles.text}>These 3 Black Comedians Are Finally Being Honored For The Ways They Paved & The History They Made</Text>
</View>
<Text style={styles.text}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a metus vel nibh scelerisque tempor. Sed quis condimentum sem. Fusce malesuada ipsum blandit, consectetur risus non, sodales nulla. Aenean rhoncus erat nec metus dictum vulputate. Proin diam lectus, scelerisque a porttitor ut, pellentesque at ipsum. Nunc ut odio magna. In condimentum, dolor sit amet mollis suscipit, erat quam ornare risus, nec vulputate libero augue vitae augue. Nam bibendum in ante in vestibulum. Etiam leo dolor, egestas sit amet nulla et, auctor volutpat metus. Sed vel mauris vitae tellus vestibulum ullamcorper. Aliquam hendrerit sit amet ipsum sagittis ultricies.
Proin consequat, mi in tincidunt rutrum, augue lacus vehicula magna, eget dapibus dui neque non velit. Proin semper enim est, vitae molestie metus fermentum at. Maecenas a convallis metus. Nam bibendum tempor nunc eu rhoncus. Ut rutrum est vitae leo accumsan viverra. Nullam ex justo, hendrerit in placerat at, convallis et orci. Morbi quis convallis sapien, quis tempor dui. Maecenas tristique augue quis viverra volutpat. Donec vel nisi at dolor blandit porttitor ut non urna.
Nulla facilisi. Sed vel gravida velit, elementum vehicula lacus. Praesent luctus eget neque eget vehicula. Vestibulum diam urna, sagittis at velit at, fermentum luctus arcu. Sed sapien arcu, pellentesque a lorem quis, varius porttitor mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam rhoncus sollicitudin pretium. Aliquam eleifend turpis in posuere pellentesque. Vivamus viverra maximus lacus, sit amet cursus elit lobortis gravida. Quisque mollis velit quis dictum convallis. Vivamus non lectus auctor, blandit diam eu, lobortis odio. Nulla id pulvinar nulla.
Morbi et ex sagittis, pharetra dui ut, viverra augue. In commodo, libero nec pulvinar luctus, metus justo accumsan nisi, et congue dolor est a mauris. Mauris lacinia mi porta felis commodo, id finibus neque ullamcorper. Mauris ac ex at eros aliquam rutrum. Aenean venenatis quis neque non facilisis. Ut auctor, risus in laoreet bibendum, magna leo mollis turpis, a convallis mauris lorem sed nunc. Nulla et urna blandit, maximus lacus non, egestas sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Integer in justo in erat euismod volutpat. Nam eleifend auctor ornare. Sed commodo felis sed diam mattis vulputate. Nam cursus placerat nunc. Aliquam sem nunc, fringilla sagittis lorem quis, pulvinar rhoncus erat. Integer venenatis, nibh sed vulputate facilisis, mi eros aliquam neque, ac consectetur leo augue id lorem. Mauris efficitur aliquet neque sed sagittis. Donec et sapien nisl.</Text>
</ScrollView>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
backgroundColor: "#444",
flex: 1
},
text:{
color: "white",
margin: 16,
fontSize: 16,
},
title:{
backgroundColor: "rgba(0, 0, 0, .6)",
marginHorizontal: 30,
marginTop: -45,
},
entry: {
height: windowHeight/3,
width: windowWidth,
}
});