我正在使用反應原生一個簡單的iOS應用程序,有一些問題航海家我delcared兩種觀點,但一無所獲渲染,但一個空白頁 的跟隨是我的代碼:反應本地導航視圖不會呈現
'use strict';
var Dimensions = require('Dimensions');
import React, {
Component,
StyleSheet,
MapView,
Text,
View,
Animated,
Navigator,
TouchableHighlight,
TouchableOpacity,
Image,
PropTypes,
Modal
} from 'react-native';
var {
height: deviceHeight,
width: deviceWidth
} = Dimensions.get('window');
var BasicConfig = Navigator.SceneConfigs.FloatFromLeft;
var CustomLeftToRightGesture = Object.assign({}, BasicConfig.gestures.pop, {
snapVelocity:8,
edgeHitWidth: deviceWidth,
});
var CustomSceneConfig = Object.assign({}, BasicConfig, {
springTension: 100,
springFriction: 1,
gestures:{
pop:CustomLeftToRightGesture,
}
});
var MainMap = React.createClass({
watchID: (null: ?number),
getInitialState: function() {
return {
latitude: 0,
longitude: 0,
initialPosition: 'unknown',
lastPosition: 'unknown',
};
},
openMenu(){
this.props.navigator.push({id: 2,});
},
render: function(){
console.log("123456")
return (
<View style = {styles.container}>
<View style = {styles.TopBarContainer}>
<TouchableOpacity style={styles.toolbarButton}
onPress={this.openMenu}>
<Text style={styles.toolbarButtonText}>{"MENU"}</Text>
</TouchableOpacity>
<Text style={styles.toolbarTitle}>{"Simply Park"}</Text>
<TouchableOpacity style={styles.toolbarButton}
onPress={this.openSeacrh}>
<Image source={require('image!search')} style={styles.toolbarSeacrhImage}/>
</TouchableOpacity>
</View>
<MapView
style={styles.map}
showsUserLocation={true}
followUserLocation={true}
/>
</View>
);
}
});
var ControlPanel = React.createClass({
_handlePress(){
this.props.navigator.pop();
},
render: function() {
console.log("paaaaaaaaanel")
return (
<View style={styles.container}>
<Text style={styles.controlText}>{"Control Panel"}</Text>
<TouchableOpacity style={styles.button} onPress={this._handlePress}>
<Text>{"Close Drawer"}</Text>
</TouchableOpacity>
</View>
)
}
});
var Main = React.createClass({
_renderScene(route, navigator){
if (route.id === 2){
console.log("id is 2");
return <ControlPanel navigator={navigator} />
}else{
console.log("id is 1");
return <MainMap navigator={navigator} />
}
},
_configureScene(route){
return CustomSceneConfig;
},
render(){
console.log("hihihihihihi");
return(
<Navigator
initialRoute={{
id: 1,
}}
renderScene = {this._renderScene}
configureScene = {this._configureScene}
/>
);
}
});
const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'flex-end',
alignItems: 'center',
},
TopBarContainer:{
position: 'absolute',
backgroundColor: '#3b5998',
top: 0,
left: 0,
right: 0,
bottom: 580,
flexDirection:'row'
},
toolbarButton:{
paddingTop:35,
paddingLeft: 7,
width: 50,
alignItems:'center'
},
toolbarButtonText:{
paddingTop: 5,
color:'#fff',
fontWeight: 'normal',
fontSize: 13,
},
toolbarTitle:{
paddingTop:35,
color:'#fff',
textAlign:'center',
fontWeight:'bold',
fontSize: 18,
flex:1,
},
toolbarSeacrhImage:{
paddingTop: 20,
width: 18,
height:18,
},
map: {
position: 'absolute',
top: 70,
left: 0,
right: 0,
bottom: 0,
},
controlText: {
color: 'white',
},
button: {
backgroundColor: 'white',
borderWidth: 1,
borderColor: 'black',
padding: 10,
bottom: 500,
},
});
module.exports = Main;
我把console.log()用於調試使用。調試文本在調試xcode dubug控制檯上正確顯示,但不顯示MainMap視圖。我想知道,如果這是我的視圖樣式的問題,但幾次嘗試後沒有線索。
我已經試過,但似乎沒有工作,仍然有空白頁 –
這是你的容器上的一些有趣的樣式,是否有絕對定位的原因?另外,你是否嘗試過渲染沒有mapview,看看是否有內容出現? –
是的,如果我不使用絕對定位,地圖視圖不會正確渲染。但我自己找到了一個解決方案 –