反应原生屏幕之间的选项卡式导航

Question

我使用基于 react-native-elements 示例的 StackNavigator，并且我想启用类似于以 ID 作为参数的链接的功能。我想链接到这个屏幕：

const FontsTab = StackNavigator({
  Home: {
    screen: FontsTabView,
    path: '/',
    navigationOptions: ({ navigation }) => ({
      title: 'Fonts',
      headerLeft: (
        <Icon
          name="menu"
          size={30}
          type="entypo"
          style={{ paddingLeft: 10 }}
          onPress={() => navigation.navigate('DrawerOpen')}
        />
      ),
    }),
  },
  Detail: {
    screen: FontsDetailTabView,
    path: 'fonts_detail',
    navigationOptions: {
      title: 'Fonts Detail',
    },
  },
});

我有这个屏幕，我希望单击项目的文本以打开带有 ID 作为参数的 FontsTabView。我想实现以下目标：

<Text onPress={ (navigation)=> navigation.navigate('FontsTabView ', { id: {item.id} }) } style={styles.listHeader} >{item.title}</Text>

怎么做？

class Icons extends Component {
  constructor() {
    super();
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
    });

    this.state = {
      selectedIndex: 0,
      value: 0.5,
      dataSource: ds.cloneWithRows(list1),
        isLoading: true
    };

    this.updateIndex = this.updateIndex.bind(this);
    this.renderRow = this.renderRow.bind(this);
  }

  updateIndex(selectedIndex) {
    this.setState({ selectedIndex });
  }

  renderRow(rowData, sectionID) {
    return (
      <ListItem
        key={sectionID}
        onPress={log}
        title={rowData.title}
        icon={{ name: rowData.icon }}
      />
    );
  }
    _renderList = ({ item, navigation }) => {

        return (
            <TouchableWithoutFeedback  onPress={(event) => this._selectedItem(item.key)}>
                <View  style={styles.listRowContainer}>
                    <View  style={styles.listinside1Container}>
                        <Image  style={styles.listImage} source={item.icon} />
                        <View  style={styles.listContainer} onPress={(event) => this._selectedItem(item.text)}  >
                            <Text  onPress={ (navigation)=> navigation.navigate('DrawerOpen') } style={styles.listHeader} >{item.title}</Text>
                            <Text  style={styles.listValue} >{item.value}</Text>
                            <Image 
                                style={{width: 50, height: 50}}
                                source={{uri: item.img}}
                            />

                        </View>
                    </View>

                                </View>
            </TouchableWithoutFeedback>
        );

    }
  componentDidMount(){
        return fetch('https://www.koolbusiness.com/in.json')
            .then((response) => response.json())
            .then((responseJson) => {

                this.setState({
                    isLoading: false,
                    dataSource: responseJson.movies,
                }, function(){

                });

            })
            .catch((error) =>{
                console.error(error);
            });
    }
  render() {
      if(this.state.isLoading){
          return(
              <View style={{flex: 1, padding: 20}}>
                  <ActivityIndicator/>
              </View>
          )
      }
    const { navigation } = this.props;
    const buttons = ['Button1', 'Button2'];
    const { selectedIndex } = this.state;
      if(this.state.isLoading){
          return(
              <View style={{flex: 1, padding: 20}}>
                  <ActivityIndicator/>
              </View>
          )
      }
    return (
      <ScrollView>
        <View style={styles.headerContainer}>
          <Icon color="white" name="invert-colors" size={62} />
          <Text style={styles.heading}>Trending Ads India</Text>
        </View>
          <View style={styles.MainContainer}>


          </View>



          <View style={styles.mainWrapper} >
              <FlatList data={this.state.dataSource} renderItem={this._renderList}  keyExtractor={(item, index) => index.toString()} />

          </View>

      </ScrollView>
    );
  }
}

Answer 1

你很近，但不完全在那里，

尝试如下呈现您的项目；

<Text  onPress={ ()=> this.props.navigation.navigate('FontsTabView', { id: item.id }) } style={styles.listHeader} >
  {item.title}
</Text>

然后在FontsTabView 中，您可以读取如下参数并相应地渲染您的屏幕。

this.props.navigation.state.params.id