在React Native中实现在同一屏幕中点击不同按钮显示不同的表单,可以通过以下步骤:
以下是一个示例代码:
// FormScreen.js
import React, { useState } from 'react';
import { View, Text, TextInput } from 'react-native';
const FormScreen = () => {
const [formType, setFormType] = useState(null);
const renderForm = () => {
if (formType === "login") {
return (
<View>
<Text>Login Form</Text>
{/* Render login form elements */}
<TextInput placeholder="Username" />
<TextInput placeholder="Password" secureTextEntry />
</View>
);
} else if (formType === "register") {
return (
<View>
<Text>Register Form</Text>
{/* Render register form elements */}
<TextInput placeholder="Username" />
<TextInput placeholder="Password" secureTextEntry />
<TextInput placeholder="Email" />
</View>
);
} else {
return <Text>Please select a form type</Text>;
}
};
return (
<View>
<View>
<Text>Form Types:</Text>
<Button title="Login" onPress={() => setFormType("login")} />
<Button title="Register" onPress={() => setFormType("register")} />
</View>
{renderForm()}
</View>
);
};
export default FormScreen;
在主页面中,可以通过导入FormScreen组件并将其作为一个页面来使用:
// App.js
import React from 'react';
import { View } from 'react-native';
import FormScreen from './FormScreen';
const App = () => {
return (
<View>
<FormScreen />
</View>
);
};
export default App;
通过以上步骤,在React Native中实现了在同一屏幕中点击不同按钮显示不同的表单。根据实际需要,可以根据表单类型展示不同的表单内容,并通过更新状态变量来切换显示的表单类型。
领取专属 10元无门槛券
手把手带您无忧上云