Reactjs 反应本机渲染按钮，但不显示其高度

我试图渲染注销按钮和它的渲染，但它没有显示按钮的高度。我还添加了包含button.js和app.js数据的文件。现在的问题是它的showind按钮，但按钮的高度是1不知道为什么。我从某处复制了这段代码，并试图从中获得一些东西。其他一些地方，我可以很容易地使用按钮宽度。但不是在这里

我的common/index.js包含所有导出文件，如Button.js和

Button.js

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
const Button = ({ onPress, children }) => {
  const { buttonStyle, textStyle } = styles;
return (
  <TouchableOpacity onPress={onPress} style={buttonStyle}>
    <Text style={textStyle}>
      {children}
    </Text>
 </TouchableOpacity>
);
};

const styles = {
textStyle: {
  alignSelf: 'center',
  color: '#007aff',
  fontSize: 16,
  fontWeight: '600',
  paddingTop: 10,
  paddingBottom: 10
},

    buttonStyle: {
  flex: 1,
  alignSelf: 'stretch',
  backgroundColor: '#fff',
  borderRadius: 5,
  borderWidth: 1,
  borderColor: '#007aff',
  marginLeft: 5,
  marginRight: 5
}
};

export { Button };

从“React”导入React；
从“react native”导入{Text，TouchableOpacity}；
常量按钮=（{onPress，children}）=>{
const{buttonStyle，textStyle}=样式；
返回(
{儿童}
);
};
常量样式={
文本样式：{
对齐自我：“中心”，
颜色：“#007aff”，
尺寸：16，
重量：'600'，
paddingTop:10，
垫底：10
},
按钮样式：{
弹性：1，
自我定位：“拉伸”，
背景颜色：“#fff”，
边界半径：5，
边框宽度：1，
边框颜色：“#007aff”，
边缘左：5，
marginRight:5
}
};
导出{按钮}；

App.js

import React, {Component} from 'react';
import { View } from 'react-native';
import firebase from 'firebase';
import { Header, Button, Spinner, Card } from './components/common';
import LoginForm from './components/LoginForm';

class App extends Component {

  state = { loggedIn: null };

  componentWillMount() {
    firebase.initializeApp({
      apiKey: '***********************************',
      authDomain: '*********************************',
      databaseURL: '***********************************',
      projectId: '***************************************',
      storageBucket: '*************************************',
      messagingSenderId: '32810678085'
    });



 firebase.auth().onAuthStateChanged((user) => {
      if(user){
        this.setState({ loggedIn: true });
      }else {
        this.setState({ loggedIn: false });
      }
    });

  }

  renderContent(){

    switch (this.state.loggedIn){
      case true:
        return <Button> Log out </Button>

      case false:
        return <LoginForm />;

      default:
        return <Spinner size="large" />;
    }

  }

  render() {
    return (
      <View>
        <Header headerText="Authentication" />
        {this.renderContent()}
      </View>
    )
  }
}

export default App;

import React，{Component}来自'React'；
从“react native”导入{View}；
从“firebase”导入firebase；
从“./components/common”导入{标题、按钮、微调器、卡片}；
从“./components/LoginForm”导入LoginForm；
类应用程序扩展组件{
状态={loggedIn:null}；
组件willmount（）{
firebase.initializeApp({
apiKey:“*************************************************”，
authDomain:“*******************************************”，
数据库URL:“**********************************************”，
项目D:“*************************************************************”，
storageBucket:“****************************************************”，
messagingSenderId:'32810678085'
});
firebase.auth（）.onAuthStateChanged（（用户）=>{
如果（用户）{
this.setState（{loggedIn:true}）；
}否则{
this.setState（{loggedIn:false}）；
}
});
}
renderContent（）{
开关（this.state.loggedIn）{
大小写正确：
返回注销
案例错误：
返回；
违约：
返回；
}
}
render（）{
返回(
{this.renderContent（）}
)
}
}
导出默认应用程序；

通常，您应该在视图中包装TouchableOpacity部分，它们对样式的响应更好。在学习英语时，我经常遇到类似的错误

我喜欢这样构造我的按钮实现：

//Note i have edited this to tie in with your code
//
//Button.js file
//
//
return (
<View style = {buttonStyle}>
    <TouchableOpacity onPress={onPress}>
        <Text style={textStyle}>
            {children}
        </Text>
    </TouchableOpacity>
</View>);

只需添加以下内容：

marginTop:5

---

到

按钮样式

对象。

我遇到了完全相同的问题。 首先，教程中React Native的版本与您使用的版本有所不同，这可以解释为什么代码在教程中有效，但在我们的代码中无效，尽管我不知道

另一方面，按钮代码在其他应用程序中工作并不完全正确 部分代码

呈现登录表单时，该按钮包含在CardSection组件中

<Card>
...
    <CardSection>
        {this.renderButton()}
    </CardSection>
</Card>

...
{this.renderButton（）}

CardSection组件将其子项的flexDirection定义为 “行”（水平）和按钮“flex:1”的flex属性沿其父级的水平（行）轴扩展按钮的宽度

因此，要使该代码在当前版本的react native中工作，您有两个选项：

1.-将注销按钮放在卡片部分：

import { Header, Button, CardSection } from './components/common';

renderContent() {
  if (this.state.loggedIn) {
    return (
      <CardSection>
        <Button>Log Out</Button>
      </CardSection>
    );
  }
  return <LoginForm />;
}

从“/components/common”导入{Header，Button，CardSection}；
renderContent（）{
if（this.state.loggedIn）{
返回(
注销
);
}
返回；
}

2.-将按钮括在视图中，并至少为其提供“flexDirection:row”的样式属性：

renderContent（）{
if（this.state.loggedIn）{
返回(
注销
);
}
返回；
}
常量样式={
集装箱运输方式：{
flexDirection:'行'，
}
};

您没有使用的原因是什么？没有。我是按照我朋友给我的一个教程来做的。我正在做他正在做的事情。这就是问题所在，它没有帮助。我对不同的表单和它的显示使用相同的代码，但没有在这里显示。尝试了也没有帮助。它显示了相同的登录表单。这就是它的工作原理。我发现这个错误很奇怪，我把它贴了出来。利用人们创建的库，在这种情况下，可以避免这样的错误。如果它在其他地方正确显示，那就很奇怪了。哇。非常感谢。我花了好几个小时想弄明白它为什么不起作用！现在可以工作了，谢谢，不客气，亚历克。我也很挣扎。我很高兴能帮上忙。

import { Header, Button, CardSection } from './components/common';

renderContent() {
  if (this.state.loggedIn) {
    return (
      <CardSection>
        <Button>Log Out</Button>
      </CardSection>
    );
  }
  return <LoginForm />;
}

renderContent() {
  if (this.state.loggedIn) {
    return (
      <View style={style.containerStyle}>
        <Button>Log Out</Button>
      </View>
    );
  }
  return <LoginForm />;
}

const style = {
    containerStyle: {
      flexDirection: 'row',
    }
};