React Native ListView 和 SectionList 数据导入和链接答案

【问题标题】：React Native ListView and SectionList Data Import and LinkingReact Native ListView 和 SectionList 数据导入和链接
【发布时间】：2017-09-04 12:21:27
【问题描述】：

我在理解和传递道具和状态以及导航方面遇到了一些问题。

我正在使用 Native Base 2.3.1、React Native 0.47.2 和 React Navigate 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}} />
}
);`

这是我的列表视图页面...

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

我的问题是我如何从 listview 链接到另一个页面，将 name 参数传递给新的 stackpage，例如，在它有 Apple 的列表中，我需要然后转到另一个页面，其中包含该 listitem 的详细信息。

我不介意我是否使用 SectionList 来执行此操作，因为我不是用字母分隔的东西。虽然如果我使用 sectionlist 来做，我不确定如何使用数据的导入，因为我已经使用现有的列表视图查看了很多关于此的教程。

【问题讨论】：

标签： react-native react-navigation react-native-listview

【解决方案1】：

嗯，我最终想通了，我觉得有点惭愧，它是如此简单：在我的行文件中我需要添加

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)} >

props 被添加到 this.onRead()

所以页面道具没有被正确传递，尽管它确实看到了一个不正确的值。所以没有这样的错误。希望这对将来的任何人都有帮助。

【讨论】：