React Native

javascript - 如何在同一屏幕内切换视图（React Native）？

我想用 react-native-scrollable-tab-view 复制以下内容：

目前我的代码如下，但我不确定如何执行和整合该模块以简化操作——有人有关于我如何实现这一点的想法吗？（我是初学者，所以任何帮助都将不胜感激）：

这是主要的（选项卡视图）：

'use strict'; var React = require('react-native'); var Dimensions

阅读更多 →

javascript - 在 React Native 中查看组件层级

在调试 React 网站时，我可以使用 React 开发者工具查看组件层次结构：

我如何在 React Native 中做同样的事情？摇晃菜单包含一个 'inspector'，但它似乎只允许我通过点击来检查单个元素——我看不到任何浏览完整组件层次结构的方法。

答案＃1

不幸的是，自从 react-native 0.12 版本以来，开发者工具中的“React”标签已经无法使用了。这是一个已知问题。

在Github上有一个相当活跃的讨论已经开放了一段时间，但还没有解决方案。

更新

Devtools 的

阅读更多 →

javascript - React Native - 连字符

我正在开发一个 React Native 应用程序，在里面我将一些文本显示在盒子中。有时，盒子里的单个单词太长而无法在一行中完全显示，所以 React Native 会在单词过长时直接断开，并在下一行继续显示文本。不幸的是，这会导致单词的连字符处理不佳（参见图片左侧的盒子）。我正在尝试找到一种解决方案来改善这个问题，比如在这个例子中，使结果像右侧的盒子一样，在合理的位置为单词添加连字符。我知道有一些 JavaScript 库可以处理连字符。例如，这些库可以将单词按连字符拆分成数组。但我卡住了，因为我完全不知道如何判断是否需要对单词添加连字符。有什么想法吗？

答案＃1

使用 C/C++/Java 编码：

te

阅读更多 →

javascript - 如何在 react native 中按百分比定义宽度？

我正在尝试创建一个带边框的视图，该视图居中显示并占据屏幕的80%。我想出了这个方案：

这可以工作，但似乎非常冗长。

有没有更好的（更简洁的）方法来创建一个视图，使其占屏幕宽度的某个百分比并且在页

阅读更多 →

javascript - React Native 相当于 mousedown 的事件

如果我在制作一个网站，我可以使用mousedown事件在鼠标按下时触发某些操作（尚未释放时）。

在 React Native 中，我有一个 TouchableHighlight 并且可以注册一个 onPress 回调，但这只在我松开手指从按钮时触发。

有没有办法在手指刚触碰按钮时就触发，而不仅仅是在手指松开时？

答案＃1

很快就解决了！我需要的是 onResponderStart 属性。这实际上在手势响应系统文档中没有记录，但似乎对我来说有效！

阅读更多 →

javascript - React Native 推送通知声音

我正在尝试为本地推送通知添加声音。我使用的是 RN 0.45.1 和 react-native-push-notifications 3.0.0

我设法在 iOS 和 Android 上使用默认声音安排了通知，但我未能添加自定义声音。

我有一个类型为 mp3 的音频文件。我尝试了以下方法：

将文件放在我的项目文件夹中：'/src/assests/sounds/sound.mps'（我的项目内的一个文件夹）

然后：

import notificationSound from '../src/assests/sounds/sound.mps'; PushNotification.

阅读更多 →

javascript - 使用 Enzyme 测试 React Native 的 FlatList

我正在尝试使用 Enzyme 测试一个 React Native FlatList。我想检查当列表到达末尾时是否调用了正确的函数：

import { listIsAtTheEnd } from "./actions"; import { mount } from "enzyme"; jest.mock("./actions"); describe("Main page", () => { if("Calls listIsAtTheEnd when FlatList reaches the end", () => { var app = mount(<App />); var container = app.find("FlatListContainer"); var fList = container.childAt(0); fList.instance().scrollToEnd(); expect(listIsAtTheEnd.mo

阅读更多 →

javascript - 看起来在 React Native 中使用 const 时，提升是有效的

我在 React Native 中注意到一件有趣的事情。我以为在 ES6 中 const 和 let 不支持提升。怎样可能在定义之前使用 const styles 呢？

render() { const { repos } = this.state; const reposList = repos.map((rep, index) => { return ( <Text>{rep.name}</Text> ) }); return ( <View style={styles.container}> <-- styles should not be defined {reposList} </View&g

阅读更多 →

javascript - Wix react-native-navigation 切换标签并推送屏幕

我如何同时切换标签和推送屏幕？当按钮被按下时，我希望切换到另一个标签并推送一个新屏幕。这可能吗？

class Example extends Component { buttonHandler = () => { this.props.navigator.switchToTab({ tabIndex: 0 }); this.props.navigator.push({ // actually this navigator's tabIndex is 0 screen:

阅读更多 →

javascript - React Native 的 localeCompare 在 Android 上不起作用

我正在尝试按字母顺序排列我的数组。

myArray.sort(function(a, b){ return a.title.localeCompare(b.title ,'tr'); })

myArray 包含土耳其语字符，例如“ç,ş,ü,ö,ı”。我的代码在 iOS 上运行良好，但在 Android 上却无法按照我想要的方式运行。它按字母顺序排序，但以土耳其语字符开头的单词出现在列表的底部。

答案＃1

在最新版本的 React Native 中，你可以通过将 app/build.gradle 中 jscFlavor 的值更改为 org.webkit:android-jsc-intl:+ 来在你的 Android 应用中启用 Intl 支持

在 Gradle 文件中更改值的位置

阅读更多 →