一、TextInput 文本输入框组件

支持设置最多字符数、支持多行文本和限制行数、支持初始值、支持设置输入框类型、支持各类输入框事件

import React from 'react';
import {View, Text, TextInput, StyleSheet} from 'react-native';

const UselessTextInput = () => {
  const [value, onChangeText] = React.useState('');

  return (
    <View style={Styles.container}>
      <Text style={Styles.label}>用户名：</Text>
      <TextInput
        style={Styles.input}
        placeholder="请输入"
        onChangeText={text => onChangeText(text)}
        value={value}
        autoFocus={true}
      />
    </View>
  );
};

const Styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    padding: 20,
    backgroundColor: '#FFFFFF',
  },
  label: {
    fontSize: 24,
  },
  input: {
    height: 40,
    borderColor: 'red',
    borderWidth: 1,
    width: 200,
  },
});
export default UselessTextInput;

二、Button 按钮组件

不能自定义样式

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

const UselessTextInput = () => {
  return (
    <View style={Styles.container}>
      <Button
        title="提交按钮" // 按钮文字
        color="#849584" // 文本的颜色(iOS)，或是按钮的背景色(Android)
        onPress={() => Alert.alert('点击时触发的事件')} // 点击时触发的事件
        disabled={false} // 按钮是否禁用
      />
    </View>
  );
};

const Styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: '#FFFFFF',
  },
  btn1: {
    fontSize: 24,
  },
});
export default UselessTextInput;

三、Switch 开关组件

import React, {useState} from 'react';
import {View, Switch, StyleSheet} from 'react-native';

const App = () => {
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);

  return (
    <View style={styles.container}>
      <Switch
        disabled={false}
        trackColor={{false: '#ccc', true: 'red'}}
        thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
        ios_backgroundColor="#3e3e3e"
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;