首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何样式化我的视图以包装其中的内容

如何样式化我的视图以包装其中的内容
EN

Stack Overflow用户
提问于 2019-06-10 01:14:53
回答 1查看 22关注 0票数 0

让我先说一句,我对react-native是个新手

下面是我的组件:

代码语言:javascript
复制
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import { Text, View, Image, TextInput } from 'react-native';

class CountryCodeInput extends Component {
  state = { text: '' }
  constructor(props) {
    super(props)
  }

  componentDidMount() {
  }

  onTextChange(text) {
    if (/^\d+$/.test(text) || text === "") {
     this.setState({ text })
    }
    // this.props.onTextChange(text)
  }

  render() {
    return (
      <View style={{flex: 1, flexDirection: "row", marginRight: 0, backgroundColor: 'red', alignSelf:'baseline', flexWrap: "wrap"}}>
      <Text style={{backgroundColor:"yellow"}}>+</Text>
        <TextInput 
        onChangeText={(text)=>this.onTextChange(text)} 
        maxLength={3} 
        keyboardType="numeric"
        style={{backgroundColor:"grey", borderBottomColor: 'black', borderBottomWidth: 1, fontSize: 16, height: 24, width: 36, paddingVertical: 4 }}
        value={this.state.text} />
      </View>
    );
  }
}


export default CountryCodeInput

下面是它看起来的样子:

我需要移除所有的红色部分,并将黄色部分的高度限制为灰色部分的高度。我该怎么做呢?

alignSelf:'baseline'flexWrap: "wrap"似乎没有多大帮助。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-06-10 01:33:58

将flex从你的风格中移除

代码语言:javascript
复制
<View style={{ flexDirection: "row", marginRight: 0, backgroundColor: 'red', alignSelf:'baseline', flexWrap: "wrap"}}>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56516744

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档