React Native允许您使用React构建本机移动应用程序。 React Native的重点是在您关注的所有平台上实现开发人员效率 - 学习一次,随处写作。
在firestore中我有一个叫做钱包的集合。随机钱包可能看起来像这样 名称:“美国银行” 余额:4000 货币:“欧元” ... 用户 ID:“
Twilio 语音通话在 expo React Native(IOS)中无法工作
我已将 Twilio 视频通话功能集成到 React Native 的博览会应用程序中。但当尝试整合声音时,它不起作用。我已经从后端创建了语音令牌并...
Expo React Native Android 模拟器无法连接 Express 后端
我正在构建一个带有 Expo(托管工作流程)的 React Native 前端和一个本地运行的 Express 后端。我的应用程序在网络版本上运行良好(使用 expo start --web),但是当我在 Android 上测试时
我是react-native的新手(2天前开始),但我很快就学会了,因为我已经知道常规的react。我正在尝试编写一个现实世界的应用程序,但我不知道如何放置图像......
React Native 没有使用正确的entryFile,我定义的会被忽略
正如标题所说,这里是我的build.gradle(我已经尝试了多个版本,但似乎都不起作用) 项目.ext.react = [ BundleAssetName: "index.android.bundle", 捆绑债务...
保持其他应用程序的背景音频,react-native-video IOS
长时间倾听者第一次来电。 到目前为止,当我导航到一个屏幕时,我还没有成功地从 Spotify 之类的应用程序中获取背景音乐,以便在我的反应本机应用程序中保持活力......
命令`pod install`失败。 └─ 原因:无效的`Podfile`文件:无法加载此类文件--./scripts/autolinking。 # 来自 /Users/developer/Documents/Project1/ios/Podfile:1 -----------------------...
React Native:如果清除 Listview 数据源,刷新控件将不可用
当我将数据源设置为列表视图时,刷新控件(下拉刷新)工作得很好。如果数据源为空,我无法下拉刷新列表视图。 我的李...
react-native 中 TextInput 的焦点样式
在React Native中,当textInput获得焦点时如何改变它的样式?说我有类似的东西 类 MyInput 扩展组件 { 使成为 () { 返回 在 React Native 中,当 textInput 获得焦点时如何更改其样式?说我有类似的东西 class MyInput extends Component { render () { return <TextInput style={styles.textInput} />; } }; const stylesObj = { textInput: { height: 50, fontSize: 15, backgroundColor: 'yellow', color: 'black', } }; const styles = StyleSheet.create(stylesObj); 我想将焦点上的背景颜色更改为green。 这个文档让我相信解决方案类似于 class MyInput extends Component { constructor (props) { super(props); this.state = {hasFocus: false}; } render () { return (<TextInput style={this.state.hasFocus ? styles.focusedTextInput : styles.textInput} onFocus={this.setFocus.bind(this, true)} onBlur={this.setFocus.bind(this, false)} />); } setFocus (hasFocus) { this.setState({hasFocus}); } }; const stylesObj = { textInput: { height: 50, fontSize: 15, backgroundColor: 'yellow', color: 'black', } }; const styles = StyleSheet.create({ ...stylesObj, focusedTextInput: { ...stylesObj, backgroundColor: 'green', } }); 忽略样式结构中潜在的错误,这是否被认为是正确的处理方法?对我来说这似乎很冗长。 您可以通过传入 onFocus 和 onBlur 事件来设置和取消设置聚焦和模糊时的样式来实现此目的: onFocus() { this.setState({ backgroundColor: 'green' }) }, onBlur() { this.setState({ backgroundColor: '#ededed' }) }, 然后,在 TextInput 中执行以下操作: <TextInput onBlur={ () => this.onBlur() } onFocus={ () => this.onFocus() } style={{ height:60, backgroundColor: this.state.backgroundColor, color: this.state.color }} /> 我已经在这里建立了一个完整的工作项目。我希望这有帮助! https://rnplay.org/apps/hYrKmQ 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, TextInput } = React; var SampleApp = React.createClass({ getInitialState() { return { backgroundColor: '#ededed', color: 'white' } }, onFocus() { this.setState({ backgroundColor: 'green' }) }, onBlur() { this.setState({ backgroundColor: '#ededed' }) }, render: function() { return ( <View style={styles.container}> <TextInput onBlur={ () => this.onBlur() } onFocus={ () => this.onFocus() } style={{ height:60, backgroundColor: this.state.backgroundColor, color: this.state.color }} /> </View> ); } }); var styles = StyleSheet.create({ container: { flex: 1, marginTop:60 } }); AppRegistry.registerComponent('SampleApp', () => SampleApp); 当元素聚焦/模糊时控制样式的最佳方法是创建自己的 TextInput 包装器 export const MyAppTextInput = (props) => { return ( <TextInput {...props} /> ); }; 请注意,{...props}将传递您已设置或可用于 TextInput 的任何属性。 然后通过添加状态来扩展上述组件,以在焦点/模糊时应用样式 export const MyAppTextInput = (props) => { const [isFocused, setIsFocused] = useState(false); return ( <TextInput {...props} style={[props.style, isFocused && {borderWidth: 5, borderColor: 'blue'}]} onBlur={() => setIsFocused(false)} onFocus={() => setIsFocused(true)} /> ); }; 请记住,当您使用组件来绑定值时,如示例中所示(请参阅value={passwordText});否则,当状态更改后开始新的渲染时,该值将在模糊时消失。 <MyAppTextInput style={styles.input} value={passwordText} textContentType="password" autoCompleteType="off" secureTextEntry onChangeText={text => { setPasswordText(text); }} /> 您当然可以避免创建包装器,但如果您有多个输入,它会在您的输入父组件中造成混乱,因为您必须添加重复逻辑。 使用 refs、DirectManipulation 和 setNativeProps 以获得更高性能:https://facebook.github.io/react-native/docs/direct-manipulation. class MyInput extends Component { focusedInput = () => { this.textInput.setNativeProps({ style: { backgroundColor: 'green' } }) } blurredInput = () => { this.textInput.setNativeProps({ style: { backgroundColor: 'yellow' } }) } render () { return <TextInput ref={c => { this.textInput = c}} style={styles.textInput} onFocus={this.focusedInput} onBlur={this.blurredInput} /> } } const stylesObj = { 文本输入:{ 身高:50, 字体大小:15, 背景颜色:'黄色', 颜色:黑色', } } 常量样式 = StyleSheet.create(stylesObj) 这会直接更新 TextInput 组件,而无需重新渲染组件层次结构。 您可以创建一个状态来跟踪输入状态并使用该状态来切换样式。这是一个简单的例子 const App = () => { const [isActive, setActive] = useState(false); return ( <TextInput style={{ color: isActive ? 'black' : 'grey' }} onFocus={() => setActive(true)} onBlur={() => setActive(false)}/> ); } 为此,我在功能组件中设计了这个简单的逻辑(它在类组件中的工作原理与相关更改相同),它可以应用于多个<textinputs/>。下面我举个例子: // state const [isFocused, setIsFocused] = useState({ name: false, email: false, phone: false, }) // handlers const handleInputFocus = (textinput) => { setIsFocused({ [textinput]: true }) } const handleInputBlur = (textinput) => { setIsFocused({ [textinput]: false }) } // JSX <View style={styles.form} > <TextInput style={isFocused.name ? [styles.inputs, { borderColor: 'blue' }] : styles.inputs} placeholder='Name' placeholderTextColor={darkColors.text} textContentType='name' keyboardType='default' onFocus={() => handleInputFocus('name')} onBlur={() => handleInputBlur('name')} /> <TextInput style={isFocused.email ? [styles.inputs, { borderColor: 'blue' }] : styles.inputs} placeholder='Email' placeholderTextColor={darkColors.text} textContentType='emailAddress' keyboardType='email-address' onFocus={() => handleInputFocus('email')} onBlur={() => handleInputBlur('email')} /> <TextInput style={isFocused.phone ? [styles.inputs, { borderColor: 'blue' }] : styles.inputs} placeholder='Phone' placeholderTextColor={darkColors.text} keyboardType='phone-pad' onFocus={() => handleInputFocus('phone')} onBlur={() => handleInputBlur('phone')} /> </View> Nader Dabit 指示我做类似的事情——使用样式的状态——但我认为如果您为聚焦和非聚焦样式创建单独的样式并仅传递样式 ID,则可以以更简洁的方式完成,如下所示: getInitialState() { return { style: styles.textinput_unfocused } } onFocus() { this.setState({ style: styles.textinput_focused }) } onBlur() { this.setState({ style: styles.textinput_unfocused }) } 在渲染中——通过this.state.style中的styleID进行引用,注意不同的样式如何作为数组传递: <TextInput onBlur={ () => this.onBlur() } onFocus={ () => this.onFocus() } style={ [styles.textinput, this.state.style] } /> + 您的样式表点菜: textinput_focused: { backgroundColor: 'red', color: 'white' } textinput_unfocused: { backgroundColor: 'green' } 嘿伙计们,我有点用了大家的想法:p @Felix 给了我一个可能更清晰的想法。 (我希望在这个静态组件上不包含状态,只是为了改变样式......但我对此很陌生,无法弄清楚这一点。 这是我的解决方案: import React, { Component } from 'react'; import { StyleSheet, TextInput } from 'react-native'; class TxtInput extends Component { constructor(props) { super(props); this.state = { style: {}, }; } onFocus = () => { const state = { ...this.state }; state.style = { borderStyle: 'solid', borderColor: '#e74712', }; this.setState(state); } onBlur = () => { console.log('on ONBLUR') const state = { ...this.state }; state.style = {}; this.setState(state); } render = () => <TextInput style={[styles.input, this.state.style]} onFocus={() => this.onFocus()} onBlur={() => this.onBlur()} />; } const styles = StyleSheet.create({ input: { color: '#000000', fontFamily: 'MuseoSans 700 Italic', fontSize: 22, borderRadius: 34, borderStyle: 'solid', borderColor: 'transparent', borderWidth: 5, backgroundColor: '#ffffff', textAlign: 'center', width: '25%', }, }); export default TxtInput; 我将样式添加到数组中,在数组的第一个属性上完成所有实际的输入样式,在第二个属性上完成焦点和蓝色的 nit 选取。 希望有帮助 <TextInput style={{ backgroundColor: 'white', height: 40, width: 100, alignItems: 'center' }} theme={{ colors: { placeholder: 'white', text: 'white', primary: 'white', underlineColor: 'transparent', background: '#003489' } }} /> 在功能组件中设置初始值 const [warnColor, setWrnColor] = useState("grey"); 在文本输入中设置 style={[styles.brdColor, { borderColor: warnColor }]} 在样式表中设置它 brdColor: { height: 40, borderColor: "grey", borderBottomWidth: 1, marginTop: heightToDp("2%"), width: "100%", } 使用反应钩子TextInput和useState更改焦点上的useCallback边框颜色。 const [isFocused, setIsFocused] = useState(false); const handleFocus = useCallback(() => { setIsFocused(!isFocused); }, [isFocused]); let bcOnFocus = { borderColor: isFocused ? '#000000' : '#cccccc', }; <ScrollView> <View> <TextInput placeholder="Text Field" style={bcOnFocus} onFocus={handleFocus} /> </View> </ScrollView> 将状态回调函数添加到 style 属性。该方法的灵感来自于Pressable。 export interface TextInputStateCallbackType { readonly focused: boolean; } export type TextInputProps = Omit<TextInputPropsNative, 'style'> & { style?: | StyleProp<TextStyle> | ((state: TextInputStateCallbackType) => StyleProp<TextStyle>) | undefined; }; export const TextInput = ({ style, ...props }: TextInputProps) => { const [focused, setFocused] = useState(false); return ( <TextInputNative style={typeof style === 'function' ? style({ focused }) : style} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} {...props} /> ); }; <TextInput style={({ focused }) => { return [ styles.input, { borderColor: focused ? 'blue' : 'black', }, ]; }} onChangeText={onChangeText} value={text} />
我很好奇在 React Native 项目中命名文件夹和文件的约定或最佳实践。关于文件夹 n...中括号的使用是否有任何特定规则或指南...
CocoaPods 兼容性问题:React-RuntimeHermes Pod 未找到
我正在使用版本 0.75.4 开发 React Native 项目,并在尝试设置 CocoaPods 时遇到问题。当我运行 pod install 时,收到以下错误消息: 可可豆荚...
错误:使用 React Native 和 NativeWind 设置 Tailwind CSS 时,.plugins 不是有效的插件属性 问题: 我正在尝试使用 NativeWind 在我的 React Native 项目中设置 Tailwind CSS,...
我想使用rnmapbox在地图上显示多个多边形。我尝试了这种方法,但它显示错误 Mapbox [error] RNMBXLayer |图层线似乎是指现有的图层,但现有的f...
无法使用react-native-snap-carousel读取Expo上未定义的属性“样式”
我在 Expo 项目中使用react-native-snap-carousel 库时遇到错误。错误消息是:无法读取未定义的属性“样式”。 这是错误消息 我尝试过
Expo - 如何在 google play 中运行 eas Submit 进行内部测试
我使用expo与eas build和eas Submit来发布Android应用程序,当我执行eas Submit时,它会自动上传构建并发布到商店。 是否可以运行 eas Submit to uplo...
我想为我自己的iPhone开发一个应用程序并在上面下载该应用程序,但我没有苹果开发者帐户。我发现(如果我没记错的话)对于用 Flutter 制作的应用程序,我...
Firebase 是否不支持 Spark 计划上的电话身份验证? (日志[错误:[auth/内部错误]发生内部错误,请重试。])[重复]
我正在开发一个基于React Native框架的移动应用程序。此前,电话验证工作正常。但现在它向我显示错误([错误:[auth/内部错误]内部...
在 Android React Native 上禁用 HTTP 缓存
有没有办法避免在 Android root 设备上将 api 请求和响应存储在 http_cache 中。 我已经尝试过“缓存控制”,但没有成功。
我正在尝试为我的展会 OTA 更新设置自定义服务器。 我已经正确设置了 expo 项目,并且它可以与 expo 默认更新服务器一起使用。 我有一个服务器,比如说 https://notes.aliaref.dev
我正在尝试使用 Expo 内“@react-native-community/datetimepicker”库中的 DateTimePicker - 但是我似乎无法更改如图所示的浅灰色背景颜色。我...