反應本機ListView和SectionList數據導入和鏈接

我有一些問題都理解和傳遞道具和狀態和導航。反應本機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查看了很多教程。

來源

2017-09-04 Arktix

嗯，我figuered出來到底，我覺得有點慚愧它是如此簡單：在我行的文件，我需要添加

const onRead = (food) => { 
    this.props.navigation.navigate('Details', { ...food }); 
}; 

const Row = (props) => (
    <View style={styles.container} > 
    <Text style={styles.text} onPress={() => this.onRead(props)} > 
     {`${props.foodName}`} 
    </Text> 
    </View> 

); 

export default Row;

注行

<Text style={styles.text} onPress={() => this.onRead(props)} >

道具被添加到this.onRead（）

所以頁面道具沒有被正確傳遞，雖然它確實看到一個值不正確的值。所以沒有像這樣的錯誤。希望這有助於任何人在未來。

來源

2017-09-18 12:37:09 Arktix

反應本機ListView和SectionList數據導入和鏈接

回答

相關問題