<Text> тег не отображает значение в React native - PullRequest
0 голосов
/ 09 февраля 2019
export default class App extends Component {    

  state = {
    placeName: '',
    text:[],
  }



  changeName = (value) => {
    this.setState({
      placeName: value
    })
  }



  addText = () => {

    if (this.state.placeName.trim === "") {

      return;

    }

    else {

      this.setState(prevState => {

        return {

          text: prevState.text.concat(prevState.placeName)

        };

      })

    }

  }

  render() {

    const Display = this.state.text.map((placeOutput,i) => {
      <Text key={i}>{placeOutput}</Text>
    })

    return (

      <View style={styles.container}>
        <View style={styles.inputContainer}>
          <TextInput style={styles.inputText}
            value={this.state.placeName}
            placeholder="Awesome text here"
            onChangeText={this.changeName} />
          <Button title="Send" style={styles.inputButton}
            onPress={this.addText} />
        </View>
       <View>{Display}</View>
      </View>

    );
  }
}

const styles = StyleSheet.create({

  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },

  inputText: {
    borderBottomWidth: 2,
    borderBottomColor: "black",
    width: "70%",
  },

  inputButton: {
    width: "30%",
  },

  inputContainer: {
    width: "100%",
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: "center"
  },

  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },

  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

У меня есть один текстовый вход и кнопка.когда я что-то пишу и нажимаю кнопку ввода, я хочу, чтобы введенный текст отображался ниже, но ничего не отображается.я не знаю ... функция карты не работает ???

Ответы [ 2 ]

0 голосов
/ 09 февраля 2019

Вы забыли return Текстовый компонент внутри map, метод:

render() {
  const Display = this.state.text.map((placeOutput, i) => {
    return (
      <Text key={i}>{placeOutput}</Text>
    )
  })

  ...
}
0 голосов
/ 09 февраля 2019
 var Display = this.state.text.map((placeOutput,i) => {
return (
      <Text key={i}>{placeOutput}</Text>)
    })

вы используете возврат?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...