UI Kitten - Modal -如何设置样式和大小、颜色等？
UI Kitten是一个基于React Native的UI组件库，提供了丰富的可定制化的UI组件。其中，Modal是UI Kitten中的一个组件，用于创建模态框。
要设置UI Kitten的Modal的样式和大小、颜色等，可以通过以下步骤进行：
- 导入所需的组件和样式：
import { Modal, Button } from '@ui-kitten/components';
import { StyleSheet } from 'react-native';- 创建一个自定义的样式对象：
const styles = StyleSheet.create({
modal: {
backgroundColor: 'white',
borderRadius: 8,
padding: 16,
},
button: {
marginTop: 8,
},
});- 在组件中使用Modal，并设置相应的属性和样式：
<Modal
visible={modalVisible}
backdropStyle={styles.backdrop}
onBackdropPress={() => setModalVisible(false)}
>
<View style={styles.modal}>
<Text>这是一个模态框</Text>
<Button style={styles.button} onPress={() => setModalVisible(false)}>
关闭
</Button>
</View>
</Modal>在上述代码中，我们通过设置backdropStyle属性来设置模态框背景的样式，可以自定义背景颜色、透明度等。同时，通过在<View>组件中应用styles.modal样式，可以设置模态框的样式，例如背景颜色、边框圆角、内边距等。
需要注意的是，UI Kitten的Modal组件还提供了其他属性和样式，可以根据具体需求进行设置。更多详细信息和示例代码，可以参考UI Kitten官方文档中Modal组件的介绍：UI Kitten Modal。
另外，腾讯云并没有与UI Kitten直接相关的产品或服务，因此无法提供相关的推荐产品和链接地址。
相关·内容
2回答
模态未更新到数组中的新项、火基/响应本机状态
javascript、reactjs、react-native、frontend
我当前使用react本机应用程序的问题是，当用户希望打开一个课程(使用每个对象都是一个带有标题、描述、img url等的课程)以通过一个模式使其更大时，它的状态不会更新。我的意思是，如果你按下新的一课，书的标题、描述和其他属性不会改变。解决这个问题的办法是什么？
export default function Learn() {
const [modalVisible, setModalVisible] = useState(false);
const [lessons,setLessons] = useState()
useEffect(() =>
浏览 6提问于2022-12-04得票数 1
1回答
React Native Flatlist仅更新最后一项
react-native、react-native-flatlist
当我试图更新扁平列表中的数据时，它不会更新所选的项，而是只更新最后插入的项。
更新：
const updateUser = (item) => {
setModalVisible(false);
let jobRef = firebase.database().ref("user/" + userId + "/job/" + item.id);
jobRef
.update({ name: newName})
.then(res => consol
浏览 0提问于2021-03-27得票数 0
2回答
如何阻止数组不断地重呈现
javascript、reactjs、typescript、react-native
我有一个图像数组，当我单击react中的一个按钮并选择一个图像时，我将更新每个值。然而，当我只希望数组在选择图像时，它就会不断地重命名。这是我的代码：
function OnboardingUploadPhotos() {
const [modalVisible, setModalVisible] = useState(false);
const [permissionStatus, setPermissionStatus] = useState('');
const [files, setFiles] = useState<string[]>([
浏览 2提问于2021-09-16得票数 1
回答已采纳
1回答
在<Modal>外部单击react本机的关闭模式
react-native、react-native-modal
我正在使用react本地语言进行应用。在这里，我可以打开模态在一次点击，也能够关闭模态时，点击内的模态。但我也想关闭模态时，点击它的外面。
下面是我的代码：
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, Modal, TouchableWithoutFeedback, Alert } from 'react-native';
function Main({ navigation }) {
const [modalVisible, setM
浏览 1提问于2020-12-26得票数 0
1回答
我无法触发从不同组件打开的模态组件
react-native
我在一个单独的js文件中声明了一个Modal组件，并试图在发生onPress事件时使其出现。我看上去没办法跟你讨价还价。
我在谷歌上搜索并找到了，但要么我得不到什么，要么对我不起作用。
我有下面的modal.js
import React, {Component} from 'react';
import {
Modal,
StyleSheet,
Text,
TouchableHighlight,
View,
Alert
} from 'react-native';
import config from '../config/co
浏览 0提问于2019-06-27得票数 0
回答已采纳
2回答
陈述和结束一种模式
ios、modal-dialog、react-native、reactjs
因此，我有一个初始屏幕，它允许您单击一个按钮并显示一个模态屏幕：
import SettingsScreen from './SettingsScreen';
...
export default class InitialScreen extends Component {
constructor(props) {
super(props);
this.state = {modalVisible: false};
}
setModalVisible(visible) {
this.setState({modalVisible: visib
浏览 2提问于2016-09-04得票数 0
回答已采纳
1回答
React本机功能:模态关闭功能
react-native
我目前正在遵循这里给出的模式示例。
代码工作，它确实显示了一个模态框。
但是，除了通过TouchableHighlight onPress事件实现的功能之外，没有“关闭”功能。
在拐角处有可能通过"X“实现”关闭模式“功能吗？
我查了一下道具，找不到任何东西。
这是否意味着仅仅使用TouchableHighlight的onPress事件，您就能够控制模式的关闭？
App.js代码
import React, { Component } from 'react';
import { Modal, Text, TouchableHighlight, View } from
浏览 2提问于2017-11-27得票数 0
回答已采纳
1回答
在React本机中更改类外的模态小部件的状态
javascript、react-native、modal-dialog
我有两个不同的文件：HomeScreen.js和ModalWidget.js。第二个文件包含模式对话框窗口的实现，我需要通过单击主屏幕上的按钮来调用这个小部件。此外，这种模式必须有能力关闭自己的按钮在它。我试图使用全局状态挂钩，但它给了我一条错误消息：Invariant Violation: Invalid Hook call。那么，我如何从主屏幕上调用这种模式呢？
ModalWidget.js
import React, { useState } from 'react';
import { Text, Button, Modal } from 'react-nati
浏览 3提问于2020-04-10得票数 0
回答已采纳
2回答
是否有方法使用UI Kitten将原色设置为布局组件的背景色？
javascript、react-native、react-native-ui-kitten
我正在使用构建一个登录屏幕，我希望将背景颜色设置为，使其成为当前主题的主颜色。
这方面的文档没有任何参考，因为它在 API页面上。
我想要实现类似于下面的代码。
import React, { Component } from "react"
import { Layout, Text } from "react-native-ui-kitten"
export default class Login extends Component {
render() {
return (
<Layout primary
浏览 2提问于2019-08-19得票数 1
回答已采纳
1回答
世博会模态关闭，找不到可变的SetModelVisible
react-native、expo
我是新来的-土生土长，用世博来做这件事。有人能解释一下我怎么能关闭我的模态吗？
const Foobar = (props) => {
const [modalVisible, setModalVisible] = useState(true);
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
<Modal
浏览 2提问于2020-06-25得票数 0
回答已采纳
1回答
反应本机: FlatList打开所有项目的模式，而不是选定的项目
javascript、react-native、react-native-flatlist、react-native-modal
我正在使用和。
单击FlatList中的项目时，我只想查看1 Modal (包含所选项目的详细信息)。
但是，如果FlatList中有4项，则选择1项将导致所有4个modals弹出。
无论如何，我只能在FlatList中显示一个选定项目的一个模态，而不是多个模式吗？
下面的代码片段(一些代码行因不需要而被删除)：
constructor(props) {
super(props);
this.state = {
dataSource: [],
isLoading: t
浏览 4提问于2020-08-21得票数 2
2回答
在屏幕上找到没有测试文本的按钮
javascript、react-native、jestjs、react-native-testing-library、react-native-ui-kitten
我正在尝试为NavBar组件编写测试(使用react本机测试-库)，该组件有几个按钮，基本上只是图标(使用ui-kitten作为本机)。因此，我无法按文本获取这些按钮(因为没有)，但其他方法对我也不起作用(比如添加accesibilityLabel或testID，然后按标签文本获取/通过测试ID获取)。你知道我做错了什么吗？
// NavBar.tsx
import React from 'react';
import {View, StyleSheet} from 'react-native';
import {HomeBtn, SaveBtn} from
浏览 16提问于2022-10-28得票数 0
回答已采纳
2回答
React Native -为Modal使用道具
javascript、react-native、react-props、react-native-modal
我正尝试在我的应用程序中使用modal，但我希望将其分为不同的类，如App.js和/components/modal。我遇到的问题是我不能正确通过道具。这是我的代码。
我进口了modal。
import InfoModal from '../components/InfoModal';
我创造了状态。
state = {modalVisible: false}
印刷机上的可视功能。
setModalVisible = (visible) => {
this.setState({ modalVisible: visible });
浏览 20提问于2021-06-09得票数 0
回答已采纳
1回答
显示“前一项标题”属性
react-native、react-hooks、react-native-flatlist
ı正在尝试为我的录音创建一个标题属性。当ı键入录音的名称时，如果它是列表中的第一个，则标题属性变为空白。在创建第二个记录并键入名称之后，它将获得前一个记录对象的标题。试图在stopRecording函数中更改模态函数的调用顺序，但没有工作。希望你能帮上忙。我的代码现在不干净，ı稍后会安排它，请忽略它。
import {
StyleSheet,
Text,
View,
Button,
FlatList,
TextInput,
Modal,
} from "react-native";
import { Audio } from "expo-av
浏览 6提问于2022-09-16得票数 0
回答已采纳
1回答
TypeError:未定义不是一个对象(计算‘_this.state.data’)
javascript、reactjs、react-native
当我试图关闭模态窗口时会发生错误。在“关闭”按钮上。错误说 _this.state.data imageKey .urls‘不是一个对象，但我传递字符串。
我正在接收来自自定义API端点的JSON。我能够迭代JSON并输出一些数据，但问题在于对图像的字符串引用。我发现了一个错误：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableWithoutFeedback,
Dimensions,
Modal,
Sc
浏览 1提问于2021-02-03得票数 1
1回答
如何在react-native中显示文本组件上模式的选定值
react-native、react-native-android、react-native-ios、react-native-modal
如何在react-native中设置文本组件上的模态选定值。 我使用的是'react-native‘中的模态组件。 从'react-native‘导入{ StyleSheet，视图，文本，TouchableOpacity，图像，模态，} <View style={styles.vwstyle}>
<Text style={styles.texthead}>You are Interested in</Text>
<View style={styles.vwside}&g
浏览 7提问于2020-01-24得票数 0
回答已采纳
1回答
试图设置Modal，Dim背景的不透明度
react-native、modal-dialog
我对不透明有意见。当Modal被触发时，它试图让它变得有点模糊，它用某种形式的不透明和所有的东西模糊了背景。当模态被触发时，我如何使背景变暗？
这张照片是这样看的：
这是我的源代码
import {
ImageBackground,
Modal,
ScrollView,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
import {Picker} from '@react-native-picker/picker';
浏览 6提问于2022-11-13得票数 0
回答已采纳
2回答
如何在打开模式时将焦点设置在模式中的第一个TouchableHighlight组件(或另一个组件，例如，由ref给定)上？
javascript、android、react-native、modal-dialog、react-native-android
在打开模式时，如何将焦点设置到模式中的第一个(或任何给定的) TouchableHighlight组件？我在用D-pad/kayboard/TV遥控器
让我们使用react-native文档模式示例的片段：
<View style={{marginTop: 22}}>
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
Alert.alert(&#
浏览 3提问于2018-10-26得票数 2
1回答
将道具从模式传递到主屏幕
react-native、modal-dialog、react-props
我正在使用React Native和React Native Modal。
我想做的是输入任务详细信息(文本)到模式，并在隐藏模式点击传递输入的文本到主屏幕。
尝试将文本作为状态属性传递-尽管没有成功...
这是我的Modal：
export default class List extends Component {
constructor() {
super();
}
state = {
modalVisible: false,
taskDetails: ''
};
setModalVisible(visible) {
t
浏览 5提问于2019-08-22得票数 0
2回答
在catch错误处理程序中响应本机显示对话框或弹出
javascript、android、ios、react-native
我是非常新的反应本地人，并试图显示一个弹出，如果一个错误列表扔。但我不能让它起作用。这是我的代码：
import React, { useState, useEffect } from 'react'
import { Alert, Modal, TouchableOpacity, StyleSheet, View, Pressable } from 'react-native'
import { Text } from 'react-native-paper'
import Background from '../components/
浏览 2提问于2022-02-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
