我很难找到关于将我的状态传递给另一个文档组件的文档/视频
我很难找到关于将我的状态传递给另一个文档组件的文档/视频
提问于 2019-04-07 17:04:14
我在容器上找到了我的搜索栏，在文本更改上设置了'search‘状态。我希望将该状态传递给嵌套组件(在一个单独的文档中)，这样它就可以根据搜索状态过滤显示的图像。
我试着到处通过搜索和导入/导出搜索。我也一直在谷歌上搜索，找不到任何与这个问题相关的信息。也许我没有正确的术语。
Components文件夹有一个AppTabNavigator文件夹，其中包含这个名为HomeTab.js的文件，我正在尝试将状态从HomeTab.js传递到下面粘贴的CardComponent.js。
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { Container, Content, Icon } from 'native-base';
import CardComponent from '../CardComponent';
import { SearchBar } from 'react-native-elements';
class HomeTab extends Component {
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-search" style={{ color: tintColor }} />
)
};
state = {
search: ''
};
updateSearch = search => {
this.setState({ search });
console.warn(search);
};
render() {
const { search } = this.state;
return (
<Container style={styles.container}>
<SearchBar
containerStyle={{ backgroundColor: 'transparent' }}
placeholder="Filter for..."
placeholderTextColor="white"
onChangeText={this.updateSearch}
value={search}
/>
<Content>
<CardComponent search={this.state.search} />
</Content>
</Container>
);
}
}
export default HomeTab;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'black'
}
});包含AppTabNavigator文件夹的Components文件夹，还包含名为CardComponent.js的文件.我正在尝试将状态从CardComponent.js从HomeTab.js传递给
import React, { Component } from 'react';
import { View, Dimensions, Image, Text, TouchableOpacity } from 'react-native';
var images = [
require('../assets/IMG-0028.jpeg'),
require('../assets/IMG-0048.jpeg'),
require('../assets/IMG-0064.jpeg'),
require('../assets/IMG-0089.jpeg'),
require('../assets/IMG-0119.jpeg'),
require('../assets/IMG-0151.jpeg'),
require('../assets/IMG-0152.jpeg'),
require('../assets/IMG-0153.jpeg'),
require('../assets/IMG-0154.jpeg'),
require('../assets/IMG-0155.jpeg'),
require('../assets/IMG-0184.jpeg'),
require('../assets/IMG-0221.jpeg'),
require('../assets/IMG-0268.jpeg'),
require('../assets/IMG-0309.jpeg'),
require('../assets/IMG-0320.jpeg'),
require('../assets/IMG-0474.jpeg'),
require('../assets/IMG-0707.jpeg'),
require('../assets/IMG-0860.jpeg')
];
var { width, height } = Dimensions.get('window');
class CardComponent extends Component {
renderHome = () => {
console.log(search);
return images.map((image, index) => {
return (
<TouchableOpacity onPress={() => console.warn(index)} key={index}>
<View
key={index}
style={[
{ width: width / 3 },
{ height: height / 3 },
{ marginBottom: 2 },
index % 3 !== 0 ? { paddingLeft: 2 } : { paddingLeft: 0 }
]}
>
<Image
style={{ flex: 1, width: undefined, height: undefined }}
source={image}
/>
</View>
</TouchableOpacity>
);
});
};
render() {
return (
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
{this.renderHome()}
</View>
);
}
}
export default CardComponent;希望能够通过ID搜索我的图片，这样我就可以学习如何在应用程序中标记它们并搜索这些标签。实际结果是挫折感和时间损失。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-04-07 18:07:11
更新的CardComponent代码：
class CardComponent extends Component {
renderHome = () => {
console.log(this.props.search);
return images.map((image, index) => {
return (
<TouchableOpacity onPress={() => console.warn(index)} key={index}>
<View
key={index}
style={[
{ width: width / 3 },
{ height: height / 3 },
{ marginBottom: 2 },
index % 3 !== 0 ? { paddingLeft: 2 } : { paddingLeft: 0 }
]}
>
<Image
style={{ flex: 1, width: undefined, height: undefined }}
source={image}
/>
</View>
</TouchableOpacity>
);
});
};
render() {
return (
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
`{this.renderHome.bind(this)()}`
</View>
);
}
}
export default CardComponent;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55561582
复制相关文章
相似问题
腾讯云开发者
