react-native-swiper 按钮无法正常工作
Posted
技术标签:
【中文标题】react-native-swiper 按钮无法正常工作【英文标题】:react-native-swiper button is not work properly 【发布时间】:2017-11-21 07:26:02 【问题描述】:问题
当react-native-swiper
如下图移动时,下方的蓝色活动按钮不会更新。
对于 swiper,我正在使用 map()
函数创建一个视图。
请注意,将键(索引)传递给子视图组件不会更新蓝色按钮。
如果我在不使用 swiper 中的 map()
函数的情况下对视图进行硬编码,则该按钮将起作用。
有什么问题?
参考照片
我的代码
import React from 'react';
import View, Platfrom, Text, StyleSheet, AsyncStorage, TouchableOpacity, Image, FlatList, ScrollView from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import connect from 'react-redux';
import moment from 'moment';
import Swiper from 'react-native-swiper';
import * as settings from '../../config/settings';
const styles = StyleSheet.create(
headerRight:
padding: 10
,
body_txt:
marginTop: 5,
padding: 8,
borderWidth: 1,
borderColor: '#EAEAEA',
,
slidmain:
borderColor: '#EAEAEA',
borderWidth: 1,
,
slide1:
width: '100%',
height: 300,
,
main:
flex: 1,
backgroundColor: '#FFFFFF',
padding: 10,
,
image:
height: 100,
width: '98%',
marginBottom: 70,
marginLeft: '1%',
resizeMode: 'contain',
);
class RepairInquiryDetailScreen extends React.Component
constructor(props)
super(props);
this.state =
created_date: '',
photos: [],
key: 0,
static navigationOptions = ( navigation ) => (
title: '수선 문의서',
headerStyle:
backgroundColor: '#fff',
borderBottomWidth: 0,
elevation: 0,
,
headerTitleStyle:
color: '#000',
fontSize: 20,
textAlign: 'center',
alignSelf: 'center',
,
headerRight: <Icon name="bars" size=30 color="#333" onPress=() => navigation.navigate('DrawerOpen') style=styles.headerRight />
)
RepairInquiryDetailService = async () =>
let user_info = await AsyncStorage.getItem('user_info');
user_token = JSON.parse(user_info).key;
let inquiry_id = this.props.navigation.state.params.id
const api_uri = settings.base_uri + 'inquiry/' + inquiry_id + '/'
fetch(api_uri,
method: 'GET',
headers:
'Authorization': 'Token ' + user_token,
)
.then(res => res.json())
.then(res =>
let repair_type_tmp = ""
for (i = 0; i < res.repair_type.length; i++)
if (i == 0)
repair_type_tmp += res.repair_type[i].type;
else
repair_type_tmp += ", " + res.repair_type[i].type;
let photos_tmp = [];
for (i = 0; i < res.photos.length; i++)
photos_tmp[i] = res.photos[i].thumbnail;
let logistics_tmp = "";
if (res.logistics == "delivery")
logistics_tmp = "택배";
else if (res.logistics == "quick")
logistics_tmp = "퀵";
else if (res.logistics == "direct")
logistics_tmp = "방문";
else
logistics_tmp = res.logistics;
this.setState(
product_type: res.product_type.type,
repair_type: repair_type_tmp,
model: res.model,
content: res.content,
logistics: logistics_tmp,
created_date: res.created_date,
direct_partner: res.direct_partner,
photos: photos_tmp,
)
console.log(this.state.photos)
)
.catch((error) =>
console.error(error);
);
componentDidMount()
this.RepairInquiryDetailService();
render()
const parsedDate = moment(this.state.created_date).format("YYYY.MM.DD")
return (
<ScrollView style=styles.main>
<Swiper
style=styles.slidmain
height=300
showsButtons=false
loop=false
>
this.state.photos.map((item, key) =>
console.log(item, key);
return (
<Slide uri=item key=key i=key/>
);
)
</Swiper>
<View style=styles.body_txt>
<Text>제품 카테고리: this.state.product_type</Text>
<Text>수선 카테고리: this.state.repair_type</Text>
<Text>모델명: this.state.model</Text>
<Text>배송유형: this.state.logistics</Text>
<Text>작성일: parsedDate</Text>
<Text>문의 상세내용: this.state.content</Text>
</View>
</ScrollView>
)
const Slide = props =>
console.log('uri and key: ', props.uri, props.i);
return (
<View style=styles.slide1 key=props.i>
<Image
source= uri: props.uri
style=styles.slide1
/>
</View>
);
const mapStateToProps = state => (
isLoggedIn: state.loginReducer.isLoggedIn
)
const RepairInquiryDetail = connect(mapStateToProps, null)(RepairInquiryDetailScreen);
export default RepairInquiryDetail;
谢谢!
【问题讨论】:
【参考方案1】:发现 here 的建议解决方法是从您的 Swiper
组件中删除 style
属性。
要获得您想要的边框,您可以将您的 swiper 包裹在父视图中。希望这会有所帮助。
【讨论】:
不幸的是,当我从 Swiper 组件中删除样式时,按钮没有更新..以上是关于react-native-swiper 按钮无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章
react-native-swiper设定高度的方法(设置rn轮播图所占高度)
React Native 安卓开发----第三方框架的引用之React-native-Swiper框架实现欢迎页第五篇