Question

我的代码中存在什么问题？

我无法返回列表视图？如果有更好的策略，请告诉我让我的代码更好

class Search extends Component {
      static navigationOptions =
        {
      title: 'search',
      headerBackTitle: null,
    };


  state = {
    search : '',
    output : []
  }


  handleSearch = (text) => {
    this.setState({search: text})
  }


  searchMe = (search) => {
    this.setState({output: <SearchExtend />})

  }



  render() {
    return (
      <View style={styles.container}>
        <TextInput style={styles.input}
          onChangeText={this.handleSearch}
        >
        </TextInput>
        <TouchableOpacity
          style={styles.submitButton}
          onPress={
            ()=>this.searchMe(this.state.search)
          }
        >
        <Text>Submit</Text>
        </TouchableOpacity>
        <View>{this.state.output}</View>
      </View>
    );
  }
}

显示ActivityIndicator，但列表视图不输出

class SearchExtend extends Component{

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    }
  }


  componentDidMount() {

    return fetch('http://example.com/games.php')
      .then((response) => response.json())
      .then((responseJson) => {
        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.setState({
          isLoading: false,
          dataSource: ds.cloneWithRows(responseJson),
        }, function() {
          // In this block you can do something with new state.

        });
      })
      .catch((error) => {
        console.error(error);
      });
  }


  ListViewItemSeparator = () => {
    return (
      <View
        style={{
          height: .5,
          width: "100%",
          backgroundColor: "#000",
        }}
      />
    );
  }


  onPress(item, rowData){
    if(item == 0)
    {
      this.props.navigation.navigate('Third', {rowData},)
    }
    else {
      this.props.navigation.navigate('Second', {rowData},)
    }
  }


  render() {
    if (this.state.isLoading) {
      return (
        <View style={{flex: 1, paddingTop: 20}}>
          <ActivityIndicator />
        </View>
      );
    }

    return (
      <View style={styles.MainContainer}>
        <ListView
          dataSource={this.state.dataSource}
          renderSeparator= {this.ListViewItemSeparator}
          renderRow={(rowData) =>
            <TouchableOpacity
              onPress={()=> this.onPress(rowData.subCategory, rowData)}>
                <Text>{rowData.name}{rowData.subCategory != 0 ? '>' : ''}</Text>
            </TouchableOpacity>
          }
          removeClippedSubviews={false}
        />
      </View>
    );
  }
}

请帮我解决这个问题

其他部分和样式已删除，因为它们与问题无关

返回列表视图反应原生

0 个答案: