布局问题

来源:

oog

2016-12-09

老师我这个布局为什么始终调整不好,显示如下,加了Image以后就出现了布局错乱的问题,如下图,您可以看到http://szimg.mukewang.com/584989e900017bb907321330.jpg

代码如下

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,可以调整下看看

0
2
Scott
回复
oog
暂时还没有,RN 不同版本在模拟器上表现会有差异,所以会出现类似情况,直接微调下样式就好了
2016-12-11
共2条回复

贯穿全栈React Native开发App

全面掌握React Native技术,不止步前端开发,让你移动领域大放光彩

946 学习 · 385 问题

查看课程