Question

我对反应原生的按钮位置有问题。

对我来说，代码还可以，但是这个可怕的按钮不会移动？

import React, { Component } from 'react';
import { Alert, StyleSheet, Text, View, Button } from 'react-native';


export default class App extends Component {
  _onPressButton() {
    Alert.alert('You are Famous ! ')
  }

  render() {
    return (
    <View style={styles.container}>
      <Button style={styles.buttonContainer}
        title="Press me"
        onPress={this._onPressButton}
      />
    </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ecf0f1'
  },
  buttonContainer: {
    position: 'absolute',
    top: 20,
    left: 40
  }
});

Answer 1

我尝试将按钮包装到视图中，它可以正常工作。

render() {
  return (
    <View style={styles.container}>
      <View style={styles.buttonContainer}>
        <Button
          title="Press me"
          onPress={this._onPressButton}
        />
      </View>
    </View>
  );
}

按钮是一个组件，使用Touchable制作，它不会使用作为道具传递的样式。您可以查看Button source code here。

Answer 2

只需将样式放在这样的View组件内，而不是放在Button内：

import React, { Component } from 'react';
import { Alert, StyleSheet, Text, View, Button } from 'react-native';


export default class App extends Component {
  _onPressButton() {
    Alert.alert('You are Famous ! ')
  }

  render() {
    return (
    <View style={styles.buttonContainer}>
      <Button
          title="Press me"
          onPress={this._onPressButton}
      />
    </View>
    );
  }
}

const styles = StyleSheet.create({
  buttonContainer: {
    position: 'absolute',
    top: 20,
    left: 40
  }
});

反应原生按钮位置

2 个答案: