Question

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

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

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 };

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'（水平）和Button“flex：1”的flex属性会扩展按钮沿其父级的水平（行）轴的宽度。

因此，要使该代码在当前版本的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.-将视图中的按钮包含在内，并至少为其提供一个“flexDirection：row”的样式属性：

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

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

Answer 2

通常你应该在Views中包装你的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>);

编辑：现在，您应该能够将高度组件添加到buttonStyle，然后按钮应该按预期显示:-)伪代码：

//Other styling components...
height: 50,
//Other styling components...

Answer 3

只需添加：

marginTop:5

到buttonStyle对象。

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

3 个答案: