reactjs - React-native渲染按钮但不显示其高度

Question

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

我的 common/index.js 拥有所有导出的文件，例如 Button.js 等 getting button in this form.its showing but not with the size

按钮.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 };

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;

Answer 1

我也遇到过同样的问题。首先，根据帖子的日期判断，教程中的 React Native 版本与您使用的版本不同，这可能可以解释为什么代码在教程中有效但在我们的代码中无效，尽管我不知道。

另一方面，按钮代码在其他情况下工作并不完全正确部分代码。

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

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

CardSection 组件将其子组件的 flexDirection 定义为'row'(水平)和按钮的 flex 属性“flex: 1”沿​​其父级的水平(行)轴扩展按钮的宽度。

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

1.- 将注销按钮包含在 CardSection 中:

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

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

2.- 将按钮包含在 View 中，并至少为其指定“flexDirection: row”样式属性:

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

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