On one View displaying the page in that page I need to display the loader but the loader need to display it on center.
var LoaderPositionCenter = React.createClass({
render:function(){
return(<View style= {{backgroundColor:'blue',flex:1,justifyContent:'center',alignItems:'center'}>
<View>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
</View>
<View style={{flex:1,justifyContent:'center',alignItems:'center',flexDirection:'row'}}>
<Text style={{textAlign:'center',color:'yellow'}}>
textsds dsdsdsd
</Text>
</View>
</View>)
}
})
On First View content i need to show the loader as center how can make it using flexbox
//New one
var Example = React.createClass({
getInitialState:function(){
return {status:"button"}
},
click:function(){
this.setState({status:"buttonText"});
},
render() {
return (
<View style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
position:'relative',
}}>
<View style={{//content view
position:'absolute',
top:0,
left:0,
right:0,
bottom:0,
}}>
<ScrollView>
{
<TouchableHighlight
underlayColor="#ffa456"
onPress={this.click}
>
<Text>{this.state.status}</Text>
</TouchableHighlight>
}
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
</ScrollView>
</View>
<View style={{
flex:1,
alignItems:'center',
justifyContent:'center'
}}>
<Image source={{uri:icons.loader}}
style= {styles.loader}/>
</View>
</View>
);
}
});
How to disable the content view that means position:'absolute' view using flexbox or other
On one View displaying the page in that page I need to display the loader but the loader need to display it on center.
var LoaderPositionCenter = React.createClass({
render:function(){
return(<View style= {{backgroundColor:'blue',flex:1,justifyContent:'center',alignItems:'center'}>
<View>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
</View>
<View style={{flex:1,justifyContent:'center',alignItems:'center',flexDirection:'row'}}>
<Text style={{textAlign:'center',color:'yellow'}}>
textsds dsdsdsd
</Text>
</View>
</View>)
}
})
On First View content i need to show the loader as center how can make it using flexbox
//New one
var Example = React.createClass({
getInitialState:function(){
return {status:"button"}
},
click:function(){
this.setState({status:"buttonText"});
},
render() {
return (
<View style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
position:'relative',
}}>
<View style={{//content view
position:'absolute',
top:0,
left:0,
right:0,
bottom:0,
}}>
<ScrollView>
{
<TouchableHighlight
underlayColor="#ffa456"
onPress={this.click}
>
<Text>{this.state.status}</Text>
</TouchableHighlight>
}
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
<Text>one</Text>
</ScrollView>
</View>
<View style={{
flex:1,
alignItems:'center',
justifyContent:'center'
}}>
<Image source={{uri:icons.loader}}
style= {styles.loader}/>
</View>
</View>
);
}
});
How to disable the content view that means position:'absolute' view using flexbox or other
Share Improve this question edited Dec 28, 2015 at 6:05 vasavi asked Dec 26, 2015 at 5:12 vasavivasavi 1,5856 gold badges21 silver badges27 bronze badges 5- I thought I'd try to work this out for you, but it's late and I'm getting tired. However, I think the answer can be found here github./brentvatne/react-native-modal if you dig into it. There's an <Overlay> ponent that could be really useful as well. Good luck! – Chris Geirman Commented Dec 26, 2015 at 6:59
- And see this too... stackoverflow./questions/34459609/… – Chris Geirman Commented Dec 26, 2015 at 7:06
- Thank you Chris Geirman .Actually i want to work this loader make center for both android and ios but react-native-modal is works for ios only. – vasavi Commented Dec 26, 2015 at 7:57
- understood, I'm not suggesting you use them as much as I'm suggesting you understand how they work since you are trying to solve a similar problem – Chris Geirman Commented Dec 26, 2015 at 13:45
- Yes i understood Chris Geirman.Thank you – vasavi Commented Dec 28, 2015 at 4:06
1 Answer
Reset to default 2You can set the outer container to have a style property of:
flex: 1,
alignItems: 'center',
justifyContent: 'center'
I've set up a full project here, and pasted the entire code below:
https://rnplay/apps/Lq4G9w
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
ActivityIndicatorIOS
} = React;
var SampleApp = React.createClass({
getInitialState: function(){
return {
animating: true
}
},
render: function() {
return (
<View style={styles.container}>
<ActivityIndicatorIOS animating={this.state.animating} style={[{height: 80}]} size="large" />
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ddd'
},
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745089598a4610612.html
评论列表（0条）