布局问题
来源:

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
相似问题