在 React Native 中使用 Material UI 组件库(如 @react-native-material/core
或 react-native-paper
)来创建一个带有切换表单控件的应用,并在切换时更改文本,可以按照以下步骤进行。
首先,确保您已经安装了 React Native 环境。如果还没有安装,可以参考 React Native 官方文档 进行安装。
接下来,安装 react-native-paper
组件库:
npm install react-native-paper
react-native-paper
主题在您的主应用文件(例如 App.js
)中设置 react-native-paper
主题。
// App.js
import * as React from 'react';
import { Provider as PaperProvider } from 'react-native-paper';
import Main from './Main';
export default function App() {
return (
<PaperProvider>
<Main />
</PaperProvider>
);
}
创建一个新的文件 Main.js
,并在其中编写主组件的代码。
// Main.js
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Switch, TextInput, Button } from 'react-native-paper';
const Main = () => {
const [isSwitchOn, setIsSwitchOn] = useState(false);
const [text, setText] = useState('');
const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);
return (
<View style={styles.container}>
<Text style={styles.label}>Toggle the switch to change the text:</Text>
<Switch value={isSwitchOn} onValueChange={onToggleSwitch} />
<TextInput
label="Enter some text"
value={text}
onChangeText={text => setText(text)}
style={styles.input}
/>
<Text style={styles.output}>
{isSwitchOn ? text : 'Switch is off'}
</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 16,
},
label: {
fontSize: 18,
marginBottom: 16,
},
input: {
width: '100%',
marginBottom: 16,
},
output: {
fontSize: 18,
marginTop: 16,
},
});
export default Main;
PaperProvider
包裹应用,以便使用 react-native-paper
提供的主题和组件。useState
钩子来管理开关状态 (isSwitchOn
) 和文本输入状态 (text
)。Switch
组件来创建一个切换开关,并在 onValueChange
事件中切换开关状态。TextInput
组件来创建一个文本输入框,并在 onChangeText
事件中更新文本状态。StyleSheet
创建样式,以便更好地控制组件的布局和外观。领取专属 10元无门槛券
手把手带您无忧上云