2017-09-04 80 views
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查看了很多教程。

回答

0

嗯,我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()

所以页面道具没有被正确传递,虽然它确实看到一个值不正确的值。所以没有像这样的错误。希望这有助于任何人在未来。