使用React Native的垂直按钮

Question

我是新手做出反应。我想使用react native来创建一个垂直按钮。我怎样才能做到这一点？附上所需的按钮图像供您参考。任何帮助都会非常感激。

Answer 1

这是使用Switch的一种简单方法： （第一张图片：IOS，第二张图片：Android）

import React, { Component } from 'react';
import { Text, View, StyleSheet, Switch } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  state = {
    accept: false
  }
  render() {
    return (
      <View style={styles.container}>
        <View style={{flex: 2, alignItems: "center"}}>
          <Text>Turn on the switch when you want to accept work, and turn it off when you dont!</Text>
        </View>
        <View style={{flex: 1, alignItems: "center"}}>
          <Switch 
            style={styles.verticalSwitch}
            value={this.state.accept}
            onTintColor="blue"
            onValueChange={() => this.setState({accept:!this.state.accept})}
          />
          <Text style={{marginTop: 12}}>
            {this.state.accept ? "on" : "off"}
          </Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
    paddingHorizontal: 20,
  },
  verticalSwitch: {
    transform: [{ rotate: '-90deg'}]
  }
});