布局问题
来源:
oog
2016-12-09
老师我这个布局为什么始终调整不好,显示如下,加了Image以后就出现了布局错乱的问题,如下图,您可以看到
代码如下
var Edit = React.createClass({
getInitialState(){
var user = this.props.user || {}
return {
previewVideo: false, //视频是否已上传
videoUploaded:false
}
},
render(){
return(
<View style={styles.container}>
<View style={styles.toolbar}>
<Text style={styles.toolbarTitle}>
{
this.state.previewVideo ? '点击按钮配音' : '开始上传视频'}
</Text>
{
this.state.previewVideo && this.state.videoUploaded
? <Text style={styles.toolbarExtra} onPress={this._pickVideo}>更换视频</Text>
: null
}
</View>
<View style={styles.page}>
{
this.state.previewVideo
?<View></View>
:<TouchableOpacity style={styles.uploadContainer} onPress={this._pickVideo}>
<View style={styles.uploadBox}>
<Image source={require('../static/image/log.png')} style={styles.uploadImage} />
<Text style={styles.uploadTitle}>点我上传视频</Text>
<Text style={styles.uploadDesc}>建议时长不超过 20 秒</Text>
</View>
</TouchableOpacity>
}
</View>
</View>
)
}
})
var styles = StyleSheet.create({
container: {
flex: 1,
},
toolbar: {
flexDirection: 'row',
paddingTop: 25,
paddingBottom: 12,
backgroundColor: '#ee735c'
},
toolbarTitle: {
flex: 1,
fontSize: 16,
color: '#fff',
textAlign: 'center',
fontWeight: '600'
},
toolbarExtra: {
position: 'absolute',
right: 10,
top: 26,
color: '#fff',
textAlign: 'right',
fontWeight: '600',
fontSize: 14
},
page: {
flex: 1,
alignItems: 'center'
},
uploadContainer: {
marginTop: 90,
width: width - 40,
paddingBottom: 10,
borderWidth: 1,
borderColor: '#ee735c',
justifyContent: 'center',
borderRadius: 6,
backgroundColor: '#fff'
},
uploadTitle: {
marginBottom: 10,
textAlign: 'center',
fontSize: 14,
color: '#000'
},
uploadDesc: {
color: '#999',
textAlign: 'center',
fontSize: 12
},
uploadImage: {
width: 100,
resizeMode: 'contain'
},
uploadBox: {
flex:1
justifyContent: 'center',
alignItems: 'center'
},
})写回答
1回答
-
Scott
2016-12-09
uploadContainer 加一个高度就行了把,比如 height: 60,可以调整下看看
022016-12-11
相似问题