0
我有一些問題都理解和傳遞道具和狀態和導航。反應本機ListView和SectionList數據導入和鏈接
我使用天然鹼基2.3.1，反應原住民0.47.2和響應導航1.0.0-beta.11
我都遵循幾個教程讓我在哪裏，並有一個工作抽屜導航儀列表視圖與節頭被跟隨本教程
https://medium.com/differential/react-native-basics-how-to-use-the-listview-component-a0ec44cf1fe8
這是我的主路由器
export const StackNav = new StackNavigator({
Home: {
screen: MainHome,
},
About: {
screen: About,
},
Food: {
screen: Food,
},
Poison: {
screen: Poison,
},
Details: {
screen: foodItem,
path: 'foodItem/:food',
}
}, {
initialRouteName: "Home",
mode: 'modal',
headerMode: 'none'
},
);
export const FoodStack = new StackNavigator({
Food: {
screen: Food,
navigationOptions: {
title: 'Food',
},
},
Details: {
screen: foodItem,
}
}, {
initialRouteName: "Food",
headerMode: 'none'
});
export const AppNavigator = new DrawerNavigator({
Home: {
screen: StackNav,
},
Food: {
screen: FoodStack,
},
}, {
initialRouteName: "Home",
contentOptions: {
activeTintColor: "#e91e63"
},
contentComponent: props => <MainDrawer navigation={props.navigation} drawerProps={{...props}} />
}
);`
這爲m Ÿ列表視圖頁面...
export default class Food extends React.Component {
formatData(foodData) {
// We're sorting by alphabetically so we need the alphabet
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
// Need somewhere to store our data
const dataBlob = {};
const sectionIds = [];
const rowIds = [];
// Each section is going to represent a letter in the alphabet so we loop over the alphabet
for (let sectionId = 0; sectionId < alphabet.length; sectionId++) {
// Get the character we're currently looking for
const currentChar = alphabet[sectionId];
// Get users whose first name starts with the current letter
const food = foodData.filter((food) => food.foodName.toUpperCase().indexOf(currentChar) === 0);
// If there are any users who have a first name starting with the current letter then we'll
// add a new section otherwise we just skip over it
if (food.length > 0) {
// Add a section id to our array so the listview knows that we've got a new section
sectionIds.push(sectionId);
// Store any data we would want to display in the section header. In our case we want to show
// the current character
dataBlob[sectionId] = { character: currentChar };
// Setup a new array that we can store the row ids for this section
rowIds.push([]);
// Loop over the valid users for this section
for (let i = 0; i < food.length; i++) {
// Create a unique row id for the data blob that the listview can use for reference
const rowId = `${sectionId}:${i}`;
// Push the row id to the row ids array. This is what listview will reference to pull
// data from our data blob
rowIds[rowIds.length - 1].push(rowId);
// Store the data we care about for this row
dataBlob[rowId] = food[i];
}
}
}
return { dataBlob, sectionIds, rowIds };
}
constructor(props) {
super(props);
const getSectionData = (dataBlob, sectionId) => dataBlob[sectionId];
const getRowData = (dataBlob, sectionId, rowId) => dataBlob[`${rowId}`];
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
sectionHeaderHasChanged : (s1, s2) => s1 !== s2,
getSectionData,
getRowData,
});
const { dataBlob, sectionIds, rowIds } = this.formatData(foodData);
this.state = {
dataSource: ds.cloneWithRowsAndSections(dataBlob, sectionIds, rowIds),
};
}
render() {
const {navigate} = this.props.navigation;
return (
<StyleProvider style={getTheme(wtwmNanonix)}>
<Container>
<Header androidStatusBarColor="#93278F" >
<Left>
<Button
transparent
onPress={()=>this.props.navigation.navigate('DrawerOpen')}>
<Icon name="menu" />
</Button>
</Left>
<Body>
<Title></Title>
</Body>
<Right>
<Button transparent><Icon name="share" /></Button>
<Button transparent><Icon name="search" /></Button>
</Right>
</Header>
<View>
<ListView
dataSource={this.state.dataSource}
renderRow={(foodData) => <View><Text onPress={(foodData)=> this.props.navigation.navigate('Details', {...foodData})} >{foodData.foodName}</Text></View>}
renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
renderHeader={() => <Search/>}
rendersectionFooter={() => <sectionFooter />}
renderSectionHeader={(sectionData) => <SectionHeader {...sectionData} />}
/>
</View>
</Container>
</StyleProvider >
);
}
}
module.export = Food
我的問題是我如何從列表視圖鏈接到另一個頁面名稱參數傳遞給新stackpage因此，例如，在列表中有蘋果，我需要再轉到另一頁面中包含該列表項的詳細信息。
我不介意如果我這樣做使用SectionList，因爲我沒有用字母表中的字母分開的東西。雖然如果我使用sectionlist來做，我不確定如何使用數據導入，因爲我已經用現有的listview查看了很多教程。