反应原生中只有一行按钮的动态列表

Question

我想在 react native 中制作一个包含动态列表视图 Listview but only one row contains a button 的屏幕。我正在使用本机基础库来制作屏幕的 UI，其中给出了各种 ListView 组件，但没有给出如何制作这种类型的列表视图。我进行了很多搜索，但找不到任何具有此类 Listview 的库。

如果有人能建议一种方法来设计这种类型的列表视图，那将是一个非常大的帮助。提前致谢！！

这是我的代码实现

export default class AddNewMember extends Component {
  constructor(props) {
    super(props)
    this.state = {
      registerButtonClicked: false
    }
  }

  registerButtonClick = () => {
    this.setState({
      registerButtonClicked: true
    })
  }
  _renderRow = () => {
    var items = [
      'Simon Mignolet',
      'Nathaniel Clyne',
      'Dejan Lovren',
      'Mama Sakho',
      'Emre Can'
    ]
    for (i = 0; i < items.length; i++) {
      if (items[i] === 'Simon Mignolet') {
        return (
          <ListItem style={{ flex: 1 }}>
            <Text style={{ marginLeft: 25 }}>Vikas</Text>
          </ListItem>
        )
      } else {
        return (
          <ListItem style={{ flex: 1 }}>
            <Text style={{ marginLeft: 25 }}>{items[i]}</Text>
          </ListItem>
        )
      }
    }
  }
  CardHeader = () => {
    var items = [
      'Simon Mignolet',
      'Nathaniel Clyne',
      'Dejan Lovren',
      'Mama Sakho',
      'Emre Can'
    ]

    if (this.state.registerButtonClicked) {
      return (
        <List
          style={{ marginTop: 12, flex: 1 }}
          dataArray={items}
          renderRow={item => (
            <ListItem>
              <Text style={{ marginLeft: 25 }}>{item}</Text>
            </ListItem>
          )}
        />
      )
    } else {
      return (
        <Content>
         /* <Card transparent>
            <CardItem>
              <View style={{ flexDirection: 'row', flex: 0 }}>
                <Text style={styles.participant_name}>
                  Harish Venkatesh
                </Text>

                <TouchableOpacity
                  onPress={() => this.registerButtonClick()}
                >
                  <Text
                    style={{
                      fontSize: 12,
                      marginLeft: 30,
                      letterSpacing: 0,
                      lineHeight: 16,
                      height: 20,
                      marginTop: 10,

                      width: 250
                    }}
                  >
                    Register New Player
                  </Text>
                </TouchableOpacity>
              </View>
            </CardItem>
          </Card>*/
          <List
            style={{ flex: 1, marginTop: 12 }}
            dataArray={items}
            renderRow={this._renderRow}
          />
        </Content>
      )
    }
  }

  text = () => {
    if (this.state.registerButtonClicked) {
      return (
        <Text
          style={{
            fontSize: 14,
            color: '#951b1f',
            letterSpacing: 0,
            lineHeight: 20,
            textAlign: 'left',
            marginLeft: 30,
            marginBottom: 12,
            marginTop: 30
          }}
        >
          Add New Participant
        </Text>
      )
    } else {
      return (
        <Text
          style={{
            fontSize: 14,
            color: '#000000',
            letterSpacing: 0,
            lineHeight: 20,
            textAlign: 'left',
            marginLeft: 30,
            marginBottom: 12,
            marginTop: 30
          }}
        >
          PARTICIPANTS DETAILS{' '}
        </Text>
      )
    }
  }

  registerCardorAddDetailsCard = () => {
    if (this.state.registerButtonClicked) {
      return (
        <Card style={{ flex: 1, marginTop: 20 }} cardBody>
          <Item
            style={{
              marginLeft: 27
            }}
          >
            <Icon active name="person-add" />
            <Input
              style={{
                fontSize: 17,
                color: '#000000',
                letterSpacing: 0
              }}
              placeholder="Participant Name"
            />
          </Item>{' '}
          <Item
            style={{
              marginLeft: 27
            }}
          >
            <Icon active name="calendar" />
            <Input
              style={{
                fontSize: 17,
                color: '#000000',
                letterSpacing: 0
              }}
              placeholder="Date of Birth"
              keyboardType="numeric"
            />
          </Item>{' '}
          <Item
            style={{
              marginLeft: 27
            }}
          >
            <Icon active name="calendar" />
            <Input
              style={{
                fontSize: 17,
                color: '#000000',
                letterSpacing: 0
              }}
              placeholder="Email address"
              keyboardType="email-address"
            />
          </Item>
        </Card>
      )
    } else {
      return (
        <Card cardBody>
          {' '}
          <Text
            style={{
              fontSize: 17,
              marginLeft: 20,
              marginTop: 15,
              marginBottom: 15,
              color: '#000000',
              letterSpacing: 0,
              opacity: 0.5
            }}
          >
            +91-8840415633
          </Text>
          <Separator />
          <Text
            style={{
              fontSize: 17,
              color: '#000000',
              letterSpacing: 0,
              marginLeft: 27,
              marginTop: 15,
              marginBottom: 15,
              opacity: 0.5
            }}
          >
            30 Dec 1994
          </Text>
          <Separator />
          <Item
            style={{
              marginLeft: 27
            }}
          >
            <Input
              style={{
                fontSize: 17,
                color: '#000000',
                letterSpacing: 0
              }}
              placeholder="harishvenkatesh@ontroapp.com"
            />
          </Item>
        </Card>
      )
    }
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        {this.CardHeader()} {this.text()}
        {this.registerCardorAddDetailsCard()}
      </View>
    )
  }
}

在 _renderRow 函数中，我正在尝试进行条件渲染，但仍然没有成功。

Answer 1

最简单的方法是使用正在呈现的项目的索引。

_renderRow = (rowData, secId, rowId) => {
  if (rowId === 0) {
    // your custom list item, renders only for first row
    return (
      <ListItem style={{ flex: 1 }}>
        <Text style={{ marginLeft: 25 }}>Vikas</Text>
      </ListItem>
    )
  }
  return (
    <ListItem style={{ flex: 1 }}>
      <Text style={{ marginLeft: 25 }}>{rowData}</Text>
    </ListItem>
  )
}

NativeBase 的 List 组件在底层使用 ListView 组件，因此您可以在此处查看其文档 http://facebook.github.io/react-native/docs/listview.html#renderrow

以下这部分只是一般性建议，恕我直言

一般来说，我建议您使用 FlatList，因为 ListView 已被弃用，而 FlatList 的性能要好得多。此外，我建议尽可能避免使用像 NativeBase 这样的 UI 库，因为它们的组件通常是 React Native 提供的原生组件的包装版本，带有一些默认值，这可能会让你的生活在一开始更轻松，但它会停止你从学习真正的结构和组件开始，以后你将无法创建更复杂的组件，并且没有可用的库。

根据您的 cmets 进行编辑

在您的代码中，您没有将 rowData、rowId 发送给您的 _renderRow 函数

您应该将它们传递给 this._renderRow，如下所示。

<List style={{ marginTop: 12, }} dataArray={items} renderRow={(item, sectionID, rowID) => this._renderRow(item, sectionId, rowId)}> </List>

或者你可以这样做

<List style={{ marginTop: 12, }} dataArray={items} renderRow={this._renderRow}> </List>

Answer 2

您可以了解条件渲染。 这样您就可以满足您的要求。

https://reactjs.org/docs/conditional-rendering.html