react-native - 将本机通行证索引反应到道具
问题描述
我有一个包含图标和描述和状态的模态,我想将图标和描述从索引传递到模态,我已经传递了状态。有没有办法做到这一点?抱歉,我还是新手,无法做出原生反应,并在此先感谢
这是我的 index.js
export const img =
{
itemStatus: {
"Open": { name: 'open-book', type: 'entypo', color: '#ffb732', desc:'New Attribut, New Attention'},
"Approved": { name: 'checklist', type: 'octicon', color: '#3CB371', desc:'Approved by SPV/MNG' },
"Escalated": { name: 'mail-forward', type: 'font-awesome', color: '#ffb732', desc:'Escalated to SPV/MNG' },
"Deliver Partial": { name: 'arrange-send-to-back', type: 'material-community', color: '#8B4513', desc:'Some items in a DO have not arrived/was faulty' },
};
这是我的容器
class MyRequest extends React.Component {
constructor() {
super();
this.state = {
currentStatus: null,
refreshing: false,
fetchStatus: null
};
handleShowModal = (status) =>{
this.setState({
currentStatus: status,
});
}
handleDismissModal = () =>{
this.setState({currentStatus: null});
}
<View style={[styles.panelContainer, status === 'success' ? {} : { backgroundColor: color.white }]}>
<FlatList
showsVerticalScrollIndicator={false}
progressViewOffset={-10}
refreshing={this.state.refreshing}
onRefresh={this.onRefresh.bind(this)}
onMomentumScrollEnd={(event) => event.nativeEvent.contentOffset.y === 0 ? this.onRefresh() : null}
data={content}
renderItem={({ item }) => item}
keyExtractor={(item, key) => key.toString()}
/>
</View>
<IconModal visible={this.state.modalVisible} close={this.handleDismissModal} icon={} status={this.state.currentStatus} desc={} />
}
这是我的模态
const IconModal = (props) => {
return(
<Modal
isVisible={props.visible}
onBackdropPress={props.close}
>
<View style={styles.dialogBox}>
<View style={styles.icon}>
<Icon>{props.icon}</Icon>
</View>
<View style={styles.text}>
<Text style={styles.status}>{props.status}</Text>
<Text>{props.desc}</Text>
</View>
<TouchableOpacity onPress={props.close}>
<View>
<Text style={styles.buttonText}>GOT IT</Text>
</View>
</TouchableOpacity>
</View>
</Modal>
)
}
解决方案
有点不清楚您计划如何映射img.itemStatus
索引,但您可以直接引用您想要的对象。
import img from '....path_to_index.js'
...
// const currentItemStatus = img.itemStatus.Open
// OR
const itemStatus = 'Open' // Or 'Approved', 'Escalated', 'Deliver Partial'
const currentItemStatus = img.itemStatus[itemStatus]
...
<IconModal
visible={this.state.modalVisible}
close={this.handleDismissModal}
icon={currentItemStatus.name} // Passing name
status={this.state.currentStatus}
desc={currentItemStatus.desc} // Passing desc
/>
...
希望这有帮助
推荐阅读
- c++ - 调用虚函数的覆盖导致分段错误
- webpack - nextjs 与 apollo 永远捆绑在开发中
- php - $header 来自:php 中的变量问题
- flutter - Flutter 应用程序在运行时卡在“自动签名 iOS ...”
- c# - 如何使用 OnlyOnFaulted 选项等待任务?
- deno - 检查脚本中启用/禁用了哪些 deno“允许”标志
- dart - 可选参数的默认值必须是常量 - 颜色
- c# - 如何使用 SqlKata 从存储过程中查询?
- python - Python - 将字符串列表转换为浮点数 - 方括号和小数点导致问题
- bash - 管道 awk printf - 在(awk)格式修饰符上查找替换