小编Dan*_*Dan的帖子

在react native应用程序中,我使用'react-native-vector-icons/MaterialIcons'.

我试着<用一些文字按钮.不幸的是,<图标未与文本对齐.文本与< 底部对齐而不是中间对齐在同一行.

我没有flex: 1.代码已更新.

我的代码

    <TouchableOpacity style={styles.navBarLeftButton}>
       <Icon name="chevron-left" />
       <Text style={styles.buttonText}>My Button</Text>
    </TouchableOpacity>

我的风格

    navBarLeftButton: {
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'flex-start'
      width: 100,
      paddingLeft: 8
    }

    buttonText: {
      color: 'rgba(255,255,255,0.70)',
      fontSize: 14
    }

我正在React应用程序中使用Material-Design-lite实现Material Design.当我在我的顶级组件中使用带有浮动标签的TextField时,它可以工作.但是在顶级组件调用的组件上,它没有.具有浮动标签的TextField然后作为常规输入字段.

我注意到外部TextField获取了一个名为"is-upgraded"的类,但内部TextField没有.

应用结构

app.js
  products.js
    myTest.js (doesn't work)
  myTest.js (works)

App.jsx

export default class App extends React.Component {

  render() {
    return(
      <div>
        <Products/>
        <MyTest id="products" type="text"/>
      </div>
    )
  }
}

Products.jsx

export default class Products extends React.Component {

  render() {
    return(
      <div>
        <List items={this.state.products}/>
        <MyTest id="products" type="text"/>
        <AddProduct/>
      </div>
    )
  }
}

myTest.jsx

import React from "react";

export default class MyTest extends React.Component {
   constructor(props) {
    super(props)
  }

  render() {
    return(
      <div>
        <div className="mdl-textfield
                        mdl-js-textfield
                        mdl-textfield--floating-label">
          <input
            className="mdl-textfield__input"
            id={this.props.id} …