- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经讨论了一段时间,这是发生了什么。我在 mobx Storage 中有一个数组,我想在我的 React 原生组件的 Flatlist 中的可折叠 View 中显示它。这里的问题是,当我点击它时,它确实改变了状态,但 Action 没有发生。经过一番研究,我在 NativeBase 中找到了一个 Accordion,并在一个成功的小测试后尝试实现它。不幸的是,它不能识别数组中的索引值,说它不是一个对象。所以第一个问题与关闭和打开与 mobx 操作相关的可折叠的操作有关,第二个问题是无法从数组中读取索引值的 Accordion 。如果有人能帮助找到一种方法来为数组中的相关对象动态折叠并显示值,那就太好了。
以下是相关的代码,如果您需要更多,请随时询问,谢谢您的时间!
mobx 文件:
import {observable, action} from 'mobx';
import {LayoutAnimation} from 'react-native'
class StateStorage {
@observable list= ['Category','','','']
@observable selectedMaterial=''
@observable materials = [
{
Specs:[
textCategory= 'Drain',
textSpec1='Usabley',
textSpec2='Healthy',
textSpec3='Bio'],
name: 'RYTT',
price: '$',
image: require("./Icons/Rain.jpg"),
spec1:require("./Icons/friendly.png"),
spec2:require("./Icons/Cutler.png"),
spec3:require("./Icons/logout.png"),
category:'',
icon: '',
uses:[
uses1='cecec',
uses2='- Cans' ,
uses3='- Jars',
uses4='- Signages',
pros:[
pros1='Lightweight',
pros2='Tough',
pros3='xsxxs',
pros4='cdccd',
],
cons:[
cons1='Inflated',
cons2='Can be sticky',
cons3='ejhcejccjhc',
cons4='dcd',
cons5='dc'],
expanded: true,
specCount:0,
userCount:0,
prosCount:0,
consCount:0,
x:0
},
{
Specs:[
textCategory= 'Drain',
textSpec1='Usabley',
textSpec2='Healthy',
textSpec3='Bio'],
name: 'RYTT',
price: '$',
image: require("./Icons/Rain.jpg"),
spec1:require("./Icons/friendly.png"),
spec2:require("./Icons/Cutler.png"),
spec3:require("./Icons/logout.png"),
category:'',
icon: '',
uses:[
uses1='cecec',
uses2='- Cans' ,
uses3='- Jars',
uses4='- Signages',
pros:[
pros1='Lightweight',
pros2='Tough',
pros3='xsxxs',
pros4='cdccd',
],
cons:[
cons1='Inflated',
cons2='Can be sticky',
cons3='ejhcejccjhc',
cons4='dcd',
cons5='dc'],
expanded: true,
specCount:0,
userCount:0,
prosCount:0,
consCount:0,
x:0
},
{
Specs:[
textCategory= 'Drain',
textSpec1='Usabley',
textSpec2='Healthy',
textSpec3='Bio'],
name: 'RYTT',
price: '$',
image: require("./Icons/Rain.jpg"),
spec1:require("./Icons/friendly.png"),
spec2:require("./Icons/Cutler.png"),
spec3:require("./Icons/logout.png"),
category:'',
icon: '',
uses:[
uses1='cecec',
uses2='- Cans' ,
uses3='- Jars',
uses4='- Signages',
pros:[
pros1='Lightweight',
pros2='Tough',
pros3='xsxxs',
pros4='cdccd',
],
cons:[
cons1='Inflated',
cons2='Can be sticky',
cons3='ejhcejccjhc',
cons4='dcd',
cons5='dc'],
expanded: true,
specCount:0,
userCount:0,
prosCount:0,
consCount:0,
x:0
},
]
@action incrementSpecCount(){
//x=uses1 or x=pros1 oe x=cons1
for (i = 0; i < this.materials.length; i++)
{
for (n=0; n<this.materials[i].Specs.length; n++){
if(this.materials[i].Specs[n]==='')
{this.materials[i].specCount++,
this.materials[i].x=i+1}}
}
}
@action incrementUserCount(){
//x=uses1 or x=pros1 oe x=cons1
for (i = 0; i < this.materials.length; i++)
{
for (n=0; n<this.materials[i].uses.length; n++){
if(this.materials[i].uses[n]==='')
{this.materials[i].userCount++,
this.materials[i].x=i+1}}
}
}
@action incrementProsCount(){
//x=uses1 or x=pros1 oe x=cons1
for (i = 0; i < this.materials.length; i++)
{
for (n=0; n<this.materials[i].pros.length; n++){
if(this.materials[i].pros[n]==='')
{this.materials[i].prosCount++,
this.materials[i].x=i+1}}
}
}
@action incrementConsCount(){
//x=uses1 or x=pros1 oe x=cons1
for (i = 0; i < this.materials.length; i++)
{
for (n=0; n<this.materials[i].cons.length; n++){
if(this.materials[i].cons[n]==='')
{this.materials[i].consCount++,
this.materials[i].x=i+1}}
}
}
@action changeLayout(index) {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
this.materials[index].expanded= !this.materials[index].expanded
console.log(this.materials[index].expanded)
}
import React, { Component } from 'react';
import { View, Text, FlatList, Image, ImageBackground, PixelRatio, Platform, UIManager, TouchableOpacity, LayoutAnimation } from 'react-native';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'
import DropDownItem from 'react-native-drop-down-item';
import StateStorage from '../StateStorage';
import {observer} from 'mobx-react';
import { Container, Header, Content, Accordion } from "native-base";
class App extends Component {
constructor (props) {
super(props)
if (Platform.OS === 'android') {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
}
componentDidMount(index){
console.log(StateStorage.materials[0].x)
console.log(StateStorage.materials[0].prosCount)
}
SpecViewStyle(index){
StateStorage.incrementSpecCount()
if(StateStorage.materials[index].specCount=== StateStorage.materials[index].x*0)
{return {height:PixelRatio.get()<=2 && Platform.OS==='android' ? 200 : 260}}
else if(StateStorage.materials[index].specCount=== StateStorage.materials[index].x)
{return {height:PixelRatio.get()<=2 && Platform.OS==='android' ? 185 : 200}}
else if(StateStorage.materials[index].specCount=== StateStorage.materials[index].x*2)
{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 165 : 150}}
else if(StateStorage.materials[index].specCount=== StateStorage.materials[index].x*3)
{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 130 : 120}}
}
CommonUseViewStyle(index){
StateStorage.incrementUserCount()
if(StateStorage.materials[index].userCount=== StateStorage.materials[index].x*0)
{return {height:PixelRatio.get()<=2 && Platform.OS==='android' ? 200 : 190}}
else if(StateStorage.materials[index].userCount=== StateStorage.materials[index].x)
{return {height:PixelRatio.get()<=2 && Platform.OS==='android' ? 185 : 175}}
else if(StateStorage.materials[index].userCount=== StateStorage.materials[index].x*2)
{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 165 : 150}}
else if(StateStorage.materials[index].userCount=== StateStorage.materials[index].x*3)
{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 130 : 120}}
else if(StateStorage.materials[index].userCount=== StateStorage.materials[index].x*4)
{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 110 : 100}}
else if(StateStorage.materials[index].userCount=== StateStorage.materials[index].x*5)
{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 75 :65}}
else if(StateStorage.materials[index].userCount=== StateStorage.materials[index].x*6)
{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 37.5 : 31}}
else if(StateStorage.materials[index].userCount=== StateStorage.materials[index].x*10
|| StateStorage.materials[index].userCount=== StateStorage.materials[index].x*9
|| StateStorage.materials[index].userCount=== StateStorage.materials[index].x*8
||StateStorage.materials[index].userCount=== StateStorage.materials[index].x*7
)
{return {height:25}}
else {return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 167.5 : 45}}
}
ProsViewStyle(index){
StateStorage.incrementProsCount()
if(StateStorage.materials[index].prosCount=== StateStorage.materials[index].x*0)
{return {height:PixelRatio.get()<=2 && Platform.OS==='android' ? 200 : 190}}
else if(StateStorage.materials[index].prosCount=== StateStorage.materials[index].x)
{return {height:PixelRatio.get()<=2 && Platform.OS==='android' ? 185 : 175}}
else if(StateStorage.materials[index].prosCount=== StateStorage.materials[index].x*2)
{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 165 : 150}}
else if(StateStorage.materials[index].prosCount=== StateStorage.materials[index].x*3)
{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 130 : 120}}
else if(StateStorage.materials[index].prosCount=== StateStorage.materials[index].x*4)
{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 110 : 100}}
else if(StateStorage.materials[index].prosCount=== StateStorage.materials[index].x*5)
{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 75 :65}}
else if(StateStorage.materials[index].prosCount=== StateStorage.materials[index].x*6)
{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 37.5 : 31}}
else if(StateStorage.materials[index].prosCount=== StateStorage.materials[index].x*8
|| StateStorage.materials[index].prosCount=== StateStorage.materials[index].x*7
)
{return {height:25}}
}
ConsViewStyle(index){
StateStorage.incrementConsCount()
if(StateStorage.materials[index].consCount=== StateStorage.materials[index].x*0)
{return {height:PixelRatio.get()<=2 && Platform.OS==='android' ? 200 : 190}}
else if(StateStorage.materials[index].consCount=== StateStorage.materials[index].x)
{return {height:PixelRatio.get()<=2 && Platform.OS==='android' ? 185 : 175}}
else if(StateStorage.materials[index].consCount=== StateStorage.materials[index].x*2)
{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 165 : 150}}
else if(StateStorage.materials[index].consCount=== StateStorage.materials[index].x*3)
{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 130 : 120}}
else if(StateStorage.materials[index].consCount=== StateStorage.materials[index].x*4)
{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 110 : 100}}
else if(StateStorage.materials[index].consCount=== StateStorage.materials[index].x*5)
{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 75 :65}}
else {return {height:PixelRatio.get()<=2 && Platform.OS==='android' ? 200 : 190}}
}
render() {
return (
// Remain Category image and CSS
// add search bar
<View
style={{
backgroundColor:'#262A2C',
flex:1
}}>
<FlatList
style={{marginTop:80,}}
//ListHeaderComponent=
//if slow change initialNumToRender and count algorithm for use,pros and cons high
/*onEndReachedThreshold={2}
onEndReached={({ distanceFromEnd }) => {
console.log('on end reached ', distanceFromEnd)
}}*/
windowSize={StateStorage.materials.length+4}
initialNumToRender={StateStorage.materials.length}
data={StateStorage.materials}
renderItem={({ item, index }) => (
<View>
<TouchableOpacity
onPress={() =>{
StateStorage.chooseMaterial(index),
console.log(StateStorage.materials[index].count),
console.log(StateStorage.materials.length) ,
console.log(StateStorage.materials[0].x)
}}>
<ImageBackground
// read computed
source={item.image}
//pay FlatIcon or design personal one
style={{
resizeMode: 'cover',
//resizeMode: 'contain,
position:'relative',
width: wp('100%'),
left: wp('0%'),
borderBottomWidth: 1,
borderBottomColor: 'grey',
padding: hp('6%'),
}}
>
<View
style={{
flex:1,
height: null,
width: null,
borderBottomColor: 'grey',
}}>
<Image
style={{
width:wp('10%'),
height:hp('5%'),
left:wp('-10%'),
top:hp('-5.5%'),
}}
source={item.spec1}/>
<Image
style={{
width:wp('10%'),
height:hp('5.5%'),
left:wp('-10%'),
top:hp('0%'),
}}
source={item.spec2}/>
<Image
style={{
width:wp('10%'),
height:hp('5.5%'),
left:wp('-10%'),
top:hp('6%'),
}}
source={item.spec3}/>
<Text
style={{ fontWeight: 'bold',
fontSize: 22,
left:item.name.length<=5 ? wp('32.5%'):wp('27.5%'),
top:hp('-9.5%'),
}}>
{item.name}
</Text>
<Text
style={{
fontWeight: 'bold',
fontSize: 25,
top: hp('-25%'),
left:wp('80%')
}}>
{item.price}
</Text>
</View>
</ImageBackground>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.8}
onPress={() => {
StateStorage.changeLayout(index)
console.log(StateStorage.materials[index].expanded)
}}
style={{ padding: 10,
backgroundColor:'black',
left:wp('-10.9%'),
top:hp('0%'),
width: wp('120%'),
height:hp('5%')}}>
<Image
style={{
width:wp('9%'),
height:hp('4.5%'),
tintColor:'white',
left:250,
top:-10
}}
source={StateStorage.materials[index].expanded ? require('../Icons/arrowDown.png') : require('../Icons/arrowUp.png') }/>
</TouchableOpacity>
<View style={{height: StateStorage.materials[index].expanded ? null : 0,
overflow: 'hidden',
backgroundColor:'black' }}>
<Text
style={{
fontSize: 17,
left:150,
top:-10,
color: 'turquoise',
padding: 10}}>
Specs
</Text>
<View style={this.SpecViewStyle(index)}>
<View style={{
display:item.Specs[0]==='' ? 'none' : 'flex',
}} >
<Image
style={{
display: item.Specs[0]==='' ? 'none' : 'flex',
}}
source={item.spec3}/>
<Text
style={{
display:item.Specs[0]==='' ? 'none' : 'flex',
}}>
{item.Specs[0]}
</Text>
</View>
<View style={{
display:item.Specs[1]==='' ? 'none' : 'flex',
}}>
<Image
style={{width:wp('8.5%'),
height:PixelRatio.get()<= 2 ? hp('5.5%') : hp('4%'),
display: item.Specs[1]==='' ? 'none' : 'flex',
marginBottom: 15,
tintColor:'white'}}
source={item.spec1}/>
<Text
style={{
display: item.Specs[1]==='' ? 'none' : 'flex',
}}>
{item.Specs[1]}
</Text>
</View>
<View style={{
display:item.Specs[2]==='' ? 'none' : 'flex',
}}>
<Image
style={{
display: item.Specs[2]==='' ? 'none' : 'flex',
}}
source={item.spec2}/>
<Text
style={{
display: item.Specs[2]==='' ? 'none' : 'flex',
}}>
{item.Specs[2]}
</Text>
</View>
<View style={{
display:item.Specs[3]==='' ? 'none' : 'flex',
}}>
<Image
display: item.Specs[3]==='' ? 'none' : 'flex',
}}
source={item.spec3}/>
<Text
style={{
,
display:item.Specs[3]==='' ? 'none' : 'flex',
}}>
{item.Specs[3]}
</Text>
</View>
<Image
//category implementation
/>
<Text>
</Text>
</View>
<Text
style={{
fontSize: 17 ,
left:125,
top:-90,
color: 'turquoise',
paddingTop: PixelRatio.get()<= 2 && Platform.OS ===' android' ? 55 :65,
paddingBottom: 10}}>
Common uses
</Text>
<View style={
this.CommonUseViewStyle(index)
}>
<Text
style=
{{
}}>
{item.uses[0]}
</Text>
<Text
style={{
display:item.uses[1]==='' ? 'none' : 'flex',
}
}
>
{item.uses[1]}
</Text>
<Text
style={{
display:item.uses[2]==='' ? 'none' : 'flex',
} }
>
{item.uses[2]}
</Text>
<Text
style={{
display:item.uses[3]==='' ? 'none' : 'flex',
} }
>
{item.uses[3]}
</Text>
</View>
<Text
style={{
}}>
Pros
</Text>
<View
style={
this.ProsViewStyle(index)
}>
<Image
style={{
display: item.pros[0]==='' ? 'none':'flex',
}}
source = {require('../Icons/plus.png')}/>
<Text
style={{
display: item.pros[0]==='' ? 'none':'flex',
}}
>
{item.pros[0]}
</Text>
<Image
style={{
display: item.pros[1]==='' ? 'none':'flex',
source = {require('../Icons/plus.png')}/>
<Text
style={{
display: item.pros[1]==='' ? 'none':'flex',
}}>
{item.pros[1]}
</Text>
<Image
style={{
display: item.pros[2]==='' ? 'none':'flex',
}}
source = {require('../Icons/plus.png')}/>
<Text
style={{
display: item.pros[2]==='' ? 'none':'flex',
}}>
{item.pros[2]}
</Text>
<Image
style={{
display: item.pros[3]==='' ? 'none':'flex',
}}
source = {require('../Icons/plus.png')}/>
<Text
style={{
display: item.pros[3]==='' ? 'none':'flex',
}}>
{item.pros[3]}
</Text>
</View>
<Text
style={{
fontSize: 17 ,
left:168,
top:-35,
marginTop:70,
color: 'turquoise',
paddingTop: PixelRatio.get()<= 2 && Platform.OS ===' android' ? 55 :65,
paddingBottom: 10
}}>
Cons
</Text>
<View style={
this. ConsViewStyle(index)
}>
<View
style={{
display:item.cons[0]==='' ? 'none' : 'flex',
}}>
<Image
style={{
display: item.cons[0]==='' ? 'none':'flex',
}}
source = {require('../Icons/minus.png')}/>
<Text
style={{
display: item.cons[0]==='' ? 'none':'flex',
}}
>
{item.cons[0]}
</Text>
</View>
<View
style={{
display:item.cons[1]==='' ? 'none' : 'flex',
}}>
<Image
style={{
display: item.cons[1]==='' ? 'none':'flex',
}}
source = {require('../Icons/minus.png')}/>
<Text
style={{
,
display: item.cons[1]==='' ? 'none':'flex',
}}>
{item.cons[1]}
</Text>
</View>
<View
style={{
display:item.cons[2]==='' ? 'none' : 'flex',
}}>
<Image
style={{
display: item.cons[2]==='' ? 'none':'flex',
}}
source = {require('../Icons/minus.png')}/>
<Text
style={{
display: item.cons[2]==='' ? 'none':'flex',
10,
left:60
}}>
{item.cons[2]}
</Text>
</View>
<View
style={{
display:item.cons[3]==='' ? 'none' : 'flex',
}}>
<Image
style={{
display: item.cons[3]==='' ? 'none':'flex',
}}
source = {require('../Icons/minus.png')}/>
<Text
style={{
,
display: item.cons[3]==='' ? 'none':'flex',
}}>
{item.cons[3]}
</Text>
</View>
<View
style={{
display:item.cons[4]==='' ? 'none' : 'flex',
}}>
<Image
style={{
display: item.cons[4]==='' ? 'none':'flex',
}}
source = {require('../Icons/minus.png')}/>
<Text
style={{
display: item.cons[4]==='' ? 'none':'flex',
}}>
{item.cons[4]}
</Text>
</View>
</View>
</View>
</View>
)}
/>
</View>
);
}
}
export default App
<Content>
<Accordion dataArray={StateStorage.materials} expanded={null}
animation={true}
renderContent={({ item, index }) => ( ..(displayed code)... )}>
</Text>)}/>
</Content>
最佳答案
不确定您的灵活性,但我强烈建议您改用 react-native-paper而不是 native-base
您可以使用 this组件,我相信它对你有用。
希望这可以帮助!
关于react-native - 无法展开和关闭可折叠点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58184545/
我通过 spring ioc 编写了一些 Rest 应用程序。但我无法解决这个问题。这是我的异常(exception): org.springframework.beans.factory.BeanC
我对 TestNG、Spring 框架等完全陌生,我正在尝试使用注释 @Value通过 @Configuration 访问配置文件注释。 我在这里想要实现的目标是让控制台从配置文件中写出“hi”,通过
为此工作了几个小时。我完全被难住了。 这是 CS113 的实验室。 如果用户在程序(二进制计算器)结束时选择继续,我们需要使用 goto 语句来到达程序的顶部。 但是,我们还需要释放所有分配的内存。
我正在尝试使用 ffmpeg 库构建一个小的 C 程序。但是我什至无法使用 avformat_open_input() 打开音频文件设置检查错误代码的函数后,我得到以下输出: Error code:
使用 Spring Initializer 创建一个简单的 Spring boot。我只在可用选项下选择 DevTools。 创建项目后,无需对其进行任何更改,即可正常运行程序。 现在,当我尝试在项目
所以我只是在 Mac OS X 中通过 brew 安装了 qt。但是它无法链接它。当我尝试运行 brew link qt 或 brew link --overwrite qt 我得到以下信息: ton
我在提交和 pull 时遇到了问题:在提交的 IDE 中,我看到: warning not all local changes may be shown due to an error: unable
我跑 man gcc | grep "-L" 我明白了 Usage: grep [OPTION]... PATTERN [FILE]... Try `grep --help' for more inf
我有一段代码,旨在接收任何 URL 并将其从网络上撕下来。到目前为止,它运行良好,直到有人给了它这个 URL: http://www.aspensurgical.com/static/images/a
在过去的 5 个小时里,我一直在尝试在我的服务器上设置 WireGuard,但在完成所有设置后,我无法 ping IP 或解析域。 下面是服务器配置 [Interface] Address = 10.
我正在尝试在 GitLab 中 fork 我的一个私有(private)项目,但是当我按下 fork 按钮时,我会收到以下信息: No available namespaces to fork the
我这里遇到了一些问题。我是 node.js 和 Rest API 的新手,但我正在尝试自学。我制作了 REST API,使用 MongoDB 与我的数据库进行通信,我使用 Postman 来测试我的路
下面的代码在控制台中给出以下消息: Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child el
我正在尝试调用一个新端点来显示数据,我意识到在上一组有效的数据中,它在数据周围用一对额外的“[]”括号进行控制台,我认为这就是问题是,而新端点不会以我使用数据的方式产生它! 这是 NgFor 失败的原
我正在尝试将我的 Symfony2 应用程序部署到我的 Azure Web 应用程序,但遇到了一些麻烦。 推送到远程时,我在终端中收到以下消息 remote: Updating branch 'mas
Minikube已启动并正在运行,没有任何错误,但是我无法 curl IP。我在这里遵循:https://docs.traefik.io/user-guide/kubernetes/,似乎没有提到关闭
每当我尝试docker组成任何项目时,都会出现以下错误。 我尝试过有和没有sudo 我在这台机器上只有这个问题。我可以在Mac和Amazon WorkSpace上运行相同的容器。 (myslabs)
我正在尝试 pip install stanza 并收到此消息: ERROR: No matching distribution found for torch>=1.3.0 (from stanza
DNS 解析看起来不错,但我无法 ping 我的服务。可能是什么原因? 来自集群中的另一个 Pod: $ ping backend PING backend.default.svc.cluster.l
我正在使用Hibernate 4 + Spring MVC 4当我开始 Apache Tomcat Server 8我收到此错误: Error creating bean with name 'wel
我是一名优秀的程序员,十分优秀!